I’m no superhero, I just have a secret weapon. Which I’m going to share with you, right now.

Let me step out of the usual coy article-writing character, and say it up front:

You wanna kick butt? Read a lot of research papers.

Yes, research papers. The publish half of publish or perish. Dry, academic, boring, inaccessible (and sometimes expensive) research papers.

They’re simply a gold mine.

They will make you smarter, better, and yes, even hotter (when your eyes start going bad from all the tiny type, you’ll resort to getting yourself a sexy monocle).

I know, you’re thinking that this is the very definition of hyperbole. But stick with me til the end of this article. I obviously can’t force you to read citations til your eyes blur, but I would bet you money I can convince you that you should.

We all agree that great interaction design is important, or we wouldn’t be here.

So, let’s talk about interaction for a moment.

Everybody says that excellent interface is one of the big reasons Google wins. It’s so simple; it just works; it’s a big friendly question box, just sitting there, waiting to help us. And, of course, Google was founded by two very ambitious PhD students.

So, if some research came out that totally demolished our view of how people search for information, you’d think that Google would be first on the scene. Right?

Sadly, wrong.

Let’s take a look at what they’re missing out on.

The Berry-Picking Model of Search

According to Marcia J. Bates, graduate researcher in the Library and Information Sciences department of UCLA, our existing models of search are dead wrong.

She proposes a different model, more accurate by her measure (and also by mine). She calls it berry-picking.

In reality, she says, users almost never find the desired result on the first try. This isn’t just because they don’t enter the correct terms. Their very idea of what they are looking for evolves over multiple searches and their desired documents extend across multiple searches, too.

Imagine a little girl tra-la-la-ing through the forest as she picks berries. She stops at this berry bush, and that berry bush, then returning to the first because it just looks so good, taking some berries from each. Then you pretty much have got it down.

Imagine, then, a search engine that helped you when you searched like that—the natural way to search. It would show you your old search terms, so you could revisit them, in case your newest forays were unproductive. You could “pin” results to some part of the page for later, in case you found nothing better, or wanted them in addition to the new goodies you found.

Wouldn’t that be great?

Doesn’t that sound exactly like the kind of thing Google should be doing, to push the boundaries of search engine design?

Or, if not them, then a competitor trying to get a leg up?

Now: I want you to guess when this research paper came out.

I’ve never seen any of these feature ideas implemented on any search engine, ever. Have you? So this paper must be really cutting-edge, right?

Actually, it wasn’t even published in this decade. Or this century. In fact, Marcia Bates published this remarkable paper in 1989.

You could be first on the scene with a practical application.

There are tons of research papers out there, like this one, that are just ripe for the picking (no pun intended).

Thanks to the publishing model of science, there are many people who spend their entire academic careers doing research in user interface-related topics. They don’t typically develop or release software. They often don’t even offer specific feature suggestions. But they do describe reality, and tests they made, and what does and doesn’t work.

You can read their papers and come up with the features and design them yourself.

Convinced yet?

How to get started

There are four major sources for computer-related research papers online:

1. The General Web
   Many researchers and/or their universities publish their papers online for free. If you read papers, or books, that cite papers, you can often find their citation lists online for free. You can find Marcia J. Bates’ paper,THE DESIGN OF BROWSING AND BERRYPICKING TECHNIQUES FOR THE ONLINE SEARCH INTERFACEfor free. I recommend it.
2. The ACM
   The Association for Computing Machinery offers a yearly subscription of about $200 for anybody off the street, and this gives you access to a large portion of their online library. It dates back decades and is fairly searchable. You can also buy individual papers instead of a membership.
3. Other online services
   The other two major sources I’d recommend are Questia and Highbeam, although not in any specific order. They are not as affordable or comprehensive as the ACM, but the ACM does not have everything.
4. Books
   There are also many available books that compile industry research papers. Some analyze a whole body of papers so you don’t have to read and digest them yourself.

One more easy place to get started

If you’re new to research, I can recommend no better place to start than the personal information textbook Keeping Things Found. The author talks about berry-picking, among other things. (It’s not a bad read, either.)

In conclusion…

Most user interaction professionals never bother to read a single research paper. Those who do, have a huge leg up on the competition. And a greater chance of making happier users.

Research papers are available, they give you a professional & competitive edge, and they’re not terribly expensive (sometimes they’re free). Usability researchers even tend to write better than, say, philosophy PhD’s.

You’ve got nothing to lose, and everything to gain.

It’s time to kick some interface designing butt! Now, go read.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Vector vs. Raster

A smart object is basically a vector object inside Photoshop’s (mostly) raster world. If you don’t know the difference between vector and raster, a basic rundown goes like this;

Vector images are created by using calculated lines. This essentially means that the curves, shapes, lines, et cetera are displayed as a result of a lot of calculations on the part of the program you are using (in this case, Illustrator and Photoshop). It’s kind of like an extended version of what you learned with point-plotting, sine waves, and function graphs in geometry, mixed with colors and transparency values.

Raster images are basically plots of color on a pixel map. This means that each pixel in your image is assigned a color, and depending on what kind of file, sometimes an alpha value.

If this still doesn’t make sense, the best thing to remember is basically that vector images can be blown up or shrunk to any size and will not lose quality; a raster image will lose quality if blown-up above its original size. Vector, thus, is the preferred format for logo design and typographically based design. However, vector images are somewhat limited in their ability to be manipulated in Photoshop. Be sure to check out the last tip in the article for a possible workflow-based solution to this problem!

What is a smart object?

A smart object in Photoshop can be one of two things.

1. A version of a raster layer that doesn’t lose quality when it is transformed down and then back up
2. One or multiple vector lines/shapes/information

Today, we will only be dealing with the second variety.

Traditionally, vector images are created inside Illustrator; however, as many designers have found, it helps to be able to move from Illustrator to Photoshop fluidly. One of the easiest ways to do this is by using – you guessed it – copy and paste.

So, say we need a striped design we have created inside Illustrator for a design we’d like to finalize in Photoshop. What is an easy way to get it into Photoshop? Cmd or Ctrl + C, of course! With the document open, copy either with the copy keyboard shortcut (Cmd or Ctrl + C) or by going to Edit > Copy.

Switch to your active document in Photoshop and either use the keyboard shortcut for paste (Cmd or Ctrl + V) or choose Edit > Paste. You are given the option to paste with different forms. Smart Object is one of the choices. Make sure the radio button next to smart object is selected, and press OK.

You then have the option of transforming the object in the same manner as you would if you chose Edit > Free Transform. Here, you can scale, skew, etc.

Once you have made any transformations you’d like to make, press Enter to accept the transformation. In your layers palette you will see a smart object layer.

If you decide later that you’d like to change something about the object, simply double-click the layer thumbnail. This will open an Illustrator editing window. Once you have made any changes you’d like to make, choose File > Save and exit the window.

The Photoshop document will automatically reflect the changes.

Tip: It helps to duplicate smart objects up front so that if you decide to use any kind of filters or warping on the layer that requires you to rasterize it, you will have a copy of the original vector object. An easy way to duplicate layers is to first select the layer you’d like to duplicate, then press Cmd or Ctrl + j. After doing this, you can place it in a folder, such as the “Originals” folder below, along with any other layers you’d like to preserve the original version of. This is mostly effective when using effects or filters that “destroy”, or change the value or location of, the actual pixels in the layer.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

One of the easiest ways to create a color state is to use an adjustment layer in Photoshop. In basically one step, you can create great looking buttons for your interface!

Let’s get it done.

Open your color button in Photoshop. It is important that your button has a transparent background; you will likely be opening a png image unless you have a layered PSD file. If you do have a layered PSD file, it would be easier to put the button layers into a layer folder.

Next, click the “Create a New Fill or Adjustment Layer” button at the bottom of the Layers Palette. This will give you a flyout menu with multiple options, some of which you may be familiar with from the Image > Adjustments menu. For this tutorial, we will select the Hue/Saturation option.

Adjust the settings in the Hue/Saturation window (the screenshot is of Photoshop CS4, but the options are very similar in other CS versions) until you are happy with the result. I’ve chosen to desaturate the button entirely, and add a bit of lightness into the button (value for saturation: -100; value for lightness: +20). These aren’t the only settings possible, of course; perhaps you only want to desaturate the button slightly, or even just add lightness? This is the place where your discretion is in play.

So your final result will look something like this if you chose the options suggested.

The Best Part is…

But wait! It gets better. There are a few perks with using this technique. Adjustment layers are non-destructive; this basically means you can always change your values later if you don’t like the result. This also means you always keep the original button underneath the adjustment layer.

Also, you can always drag adjustment layers between multiple Photoshop documents; you can even take all of your buttons and place them beneath a single adjustment layer in one Photoshop document, and voilà! You’ve created another button state for all of your buttons with just one layer. From there, all you have to do is save as a PNG with transparency, and you’re set!

We could go on, but…

There are a million things we could say about adjustment layers in Photoshop, and how effective and time saving they are; but hey, we’re trying to get this done in three minutes, right? Don’t worry, you can always come back for more FYI tips in the future. Follow use on Twitter for the latest information!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

1. Steal Some Color

Sometimes, you want to take color from something that isn’t inside Photoshop. Perhaps you like a certain color scheme in another application you use, or even a specific color you find in a picture on the web. Sure, you could take a screenshot of the app or the browser window and open it in Photoshop; but why would you do that when Photoshop can read color no matter what application you are using? To steal color from, say, kuler.com quickly and easily, follow these steps.

1. Create a new document if you do not already have a document open.
2. Open the color picker by clicking the foreground color (bottom left)
3. Make sure that the window that has your target color is visible behind Photoshop’s open window
4. Click inside the open Photoshop document and, while holding the mouse button, drag out of the Photoshop window to the target color.

See the illustration below for the technique described.

2. Enlarge Layer Panel Thumbnails

I’ve been using Photoshop for years, and for years I have wanted to know how to increase the size of the tiny little layer thumbnail representations in the layers palette. This in particular is important for being able to see a layer mask. I never took the time to look it up, but I finally took the time to figure it out when I (inevitably) got frustrated with it. Hey, we love Photoshop, but sometimes… there’s a few flaws there. (Sorry Adobe. No one is perfect.) It’s oddly quite a simple little setting tweak, but one that will save me (and hopefully you) a lot of upsetting effects that result from tiny-thumbnail-stress-syndrome.

What you do:

1. Open the layer palette.
2. Click the flyout menu on the right side, and choose “Panel Options”
3. Click the radio button next to your desired thumbnail size
4. Press Ok

3. Make Selection from Alpha Information of a Layer

This one may be the fastest of them all. Maybe even two minutes. Or really, as long as it takes for you to make a click. That’s how long it takes to make a selection from the alpha information of a layer in Photoshop.

For those of you who are unfamiliar, alpha deals with the amount of transparency of a given pixel. So, a pixel’s information includes both color (for screen, RGB) and alpha (a). This is where we get RGBA images from. Saving as a PNG allows you to preserve the alpha information of an image created in Photoshop.

So, how do you do it?

It’s as simple as CMD+Clicking on the layer’s thumbnail (or CTRL+Click for PC’s). This simple shortcut gives a marquee around whatever alpha information is held within a given layer.

Conlusion

We hope that you have enjoyed this first installment of Three Minute Tips. This will be (affectionately) hashtagged as 3MT in the future, in case you want to make sure you don’t miss out on any future Three Minute Tips! As always, we would love to hear your feedback. Do YOU have any three minute tips to share of your own? Let us know!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

the set of circumstances or facts that surround a particular event, situation, etcetera, or the parts of a written or spoken statement that precede or follow a specific word or passage, usually influencing its meaning or effect.

Already, by this definition, we should be able to see the importance of context when designing interfaces. So, what exactly might this look like in an interface design? Let’s look at a few examples.

Developers of iPhone applications in particular have a responsibility to maintain continuity with context. The social network giant Facebook emulates the native iPhone OS interface by adding the different regular actions of Facebook as a grid of 9 application-like icons, as well as a second page for “favorites”. Both pages of icons are rearrangeable just like the native home page icons. Also, most applications that have notifications are usually placed in the “dock” on the iPhone; Facebook has also adopted this and has placed notifications at the bottom of the application. This is a perfect example of creating an interface in context.

But what else does context mean? Sure, it could mean adapting stylistically to the surrounding context, as in the previous example. But what about usability?

When designing an interface, sometimes there are multiple possible choices, but only one best choice.

Take, for example, the placement of the “Home” link on various sites. On Facebook, Twitter, and MySpace, the “Home” link is the first in the navigation, while Ebay doesn’t have a button labeled “Home” at all.

Why would Ebay make such an incredibly different interface decision? It all has to do with context. If you look at another e-commerce site, such as Amazon.com, there is also not a “Home” link in the nav. Rather, with both Ebay and Amazon, the interface gives the option to go to the personal account (”My Ebay” or “Your Amazon.com”). A “brick-and-mortar” store would never want to send you “home”; rather, they would want for you to know exactly what your favorite part of the store is. This approach is very much a contextual consideration.

Other contextual considerations might include tooltips. Tooltips are tips or instructions that appear on a mouse hover. The user may need further explanation on how to do certain actions within an interface, but you don’t want to bog down the interface with a lot of body copy. Tooltips are a great solution to this problem.

You as the designer are responsible for making it, the interface, work. Contextual decisions are made by users and designers on a daily basis. Make decisions such as allowing the user to press “return” to submit a form, but insert a line break by pressing “return” while using a larger text input box. Consider the full context of the user; everything from what kind of computer and what speed, to their demographics, to their cultural background, to their local context (what probably is happening at the time they use the interface), and to the internal context (their line of reasoning while using the interface).

Conclusion

So all of this is to say, interface designers must consider context to be a very important factor while designing interfaces. This could mean the simple placement of a “send” button, or the entire feel of the interface itself, or the decision to remove the “Home” link entirely from a webpage. Thinking and designing in context will improve both the usability and user experience of your particular interface.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

In this tutorial we’re going to recreate the nav bar for the iTunes Store in Photoshop CS4. The techniques used should be able to be done using CS2 and 3 so if you don’t have the latest Adobe Creative Suite you can still follow along. At the end of the post you will find a downloadable zip file containing the completed PSD.

Let’s start by creating a new document 600px by 150px.

Next, create a shape layer that’s 600px wide and 24px tall. This will serve as the base of our nav bar. Name this layer whatever you want, but for this tutorial I named it, “nav-bar-bg”.

Now we want to apply some layer styles to “nav-bar-bg”. Start with the “Gradient Overlay” using the settings from the image below.

The colors we want to use are “1e1e1e” for the left (bottom) color and “202020″ for the right (top) color.

Leaving the Layer Style palette open check the box for Inner Glow. Use the settings from the below image and change the color to “4e4e4e”

Lastly, with the Layer Style palette still open check the Stroke and change the settings to what you see below with a color of “101010″. Now apply this style by clicking “OK” or just hit “Enter”.

Now we’ll move on to the glossy highlight. Create a new shape layer above nav-bar-bg that is 600px wide but this time only 11px tall.

TIP: You could duplicate the nav-bar-bg layer by selecting the Layer and hitting CMD/Ctrl+J which will create a copy of that layer above. Then you just remove the styles and transform it to the correct size.

Now rename this layer, “highlight” and nudge it 1px down from the top of the base.

To give the highlight that glossy shine, we’ll apply a Gradient Overlay setting both the top and bottom colors of the gradient to white. This time we’ll be adjusting the gradients opacity which we do with the top “ticks”. Changing the left (bottom) of the gradient to 50% opacity and we’ll leave the right (top) at 100%.

With the Layer Effects dialog box still open, we will adjust the “Fill” and “Opacity” of the overall settings. Changing the “Opacity” to zero and set the “Fill” at 14% (or so).

The end result should have your document looking like this.

Our next task it to create the inset dividers that go between each of the links. First we need to create a new layer, no need to name it yet. To create the 1px thick line you could use the Line Tool and set the width to 1px, but there is always some aliasing on the shape and it’s not a perfect 1px line so, we’re going to use the Marquee Tool and change the style to a fixed size of 1px wide and 100px tall as seen below.

Now fill this layer with white and then deselect by hitting Cmd/Ctrl+D.

TIP: If you ever need to fill with either Black or White the quickest way is to hit "D" on your keyboard, this will put the foreground and background color to its default state and then hit Cmd+Delete (Mac) and Ctrl+Backspace (PC) to Fill with Background (white) and Opt+Delete (Mac) and Alt+Backspace (PC) to Fill with Foreground (black).

Now that we have the 1px white line, we need to create the shadow of the inset. To do this we’ll duplicate the white line. We’ll use the "Duplicate Layer" tip we learned earlier. With the white line selected hit Cmd/Ctrl+J. Now you should have an exact copy of the white line in the layer just above the original.

Next we need to change this line to black and we do this by hitting Cmd/Ctrl+I (Invert) and we nudge this line to the right by 1px.

Our next step is to change the opacity on both of these lines so we’ll set the Opacity of the White Line to 20% and the black line to 50%.

TIP: Did you know you can change a layers opacity in increments of 10 by hitting the number keys 1 through 0 with the Select Tool (V) active? 1 being 10% and 0 100%.

After we’ve set the opacity on both of the lines let’s merge them together by highlighting both layers and hitting Cmd/Ctrl+E. Now we can rename this layer to "divider"

By now you might be wondering why these lines are way longer than they need to be. Well let’s get into that right now shall we?

Since we’re going to be using this inset divider quite a few times, and you may have made, or may want to make your nav bar deeper than we did in this tutorial, what we’ll do is create a mask that’s the same size as our base and will hide all of the overlapping bits.

With the divider layer selected we create a group by hitting Cmd/Ctrl+G and we’ll name this group, "Dividers"

This next step we’re going to create a mask on the “Dividers” group layer that is the exact size as the nav-bar-bg. So, with the "Dividers" Group as the active layer we will Cmd/Ctrl+click. This will give us a selection in the shape of nav-bar-bg, but on the group layer "Dividers".

With the group layer, “Dividers” selected we create a Layer Mask by going to Layer > Layer Mask > Reveal All.

Now hit Cmd+Del (Mac) or Ctrl+Backspace (PC) to fill the selection and hit Cmd/Ctrl+D to deselect. But wait!! The divider is missing over the base and the naughty parts are hangin out all over the place!! No problem, a simple Cmd/Ctrl+I to invert that mask and viola! We have a perfect height divider.

Now that our navigation bar is looking pretty good, all we need is some text, some icons, and some more of these dividers separating them. We will go through these steps fairly quickly since I’m sure you’re itching to get started on your own version of this nav bar.

So let’s get our text in there first. The font I found that most closely matches the iTunes nav-bar font is Tahoma 11pt bold, with a kerning of 10 and the anti-alias set to "Crisp". Let’s type some link names in and change the font to these settings.

Next we’ll add our dividers between each of our links. With the "divider" layer selected drag the divider while holding down Opt/Alt+Shift and moving it into place.

Opt/Alt will drag a copy and adding the “Shift” key locks the object on it’s vertical or horizontal plane.

The last step is to add our "Home" and "Left/Right" icons. We’ve supplied our own home and arrow icons in the download for you to use any way you wish, or not at all, but I will show you how to style them. Let’s get to that now.

The "Home" doesn’t need any styling really but the arrows do. So if you’ve used the supplied arrows you can just follow along. But if you created your own here’s how we’ll dress them up.

We set the color of the arrow to "6F6F6F" and add an Inner Shadow with the settings below.

That’s it! We’ve created all the elements needed (sans home icon) and styled them all to look like the Apple iTunes interface.

I really enjoyed creating this tutorial and hope you enjoyed reading it. I’d like to think that you not only learned how to create this interface but that you will be able to apply some of the techniques we used in other designs you create.

Download the Finished PSD Here.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

The User Interface (UI) has been around since the 1960s when Douglas Engelbart and a team of researchers at the Stanford Institute developed the first interface that was mouse-driven, and employed the use of hyperlinks. Over the years the practice of designing and developing methods of navigation grew from basic principles of user-centric and logical interfaces to presenting information in ways that not only encourage interaction, but solicitation of emotions and convincing (persuading) the user to trust with just what they see in front of them.

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.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

A lot of us know how to find great textures and throw them into Photoshop and set the layer blending mode to overlay.

But sometimes, this doesn’t give the desired result. In this particular instance, the color in the texture is causing the color in the main composition to look a little off from what I had intended it to look like. The texture itself isn’t having as much of an effect as I’d like for it to on the edges of the composition, but I don’t want it to affect the middle as much either. Also, I’d like it to be a bit more grainy.

All of these things can be achieved right inside Photoshop. To fix the color issue, the first thing we need to do is desaturate the texture. (Shortcut: Cmd/Ctrl + Shift + U)
This removes all hue properties, and leaves only luminance (grayscale) properties.


Now, we want the image to have more of an effect on the edges of the main composition. What we want to do is increase the contrast of the texture in its original form, but also keep another less contrasted version. (We will get to how to make the edges more affected after we bring the texture over onto our main composition.) First, we want to duplicate our layer (Shortcut to duplicate layer: Cmd/Ctrl + J) twice, and delete our background layer. We can name these two new layers “contrasted” and “flat”. Then we will apply Curves to our “contrasted” layer. Make sure this layer is on top, or else you will not see the effects of Curves. (Shortcut for Curves: Cmd/Ctrl+M) The amount of contrast you use will depend on your project, but I usually like to keep quite a bit of mid-tones in textures I use. (See the curve created for an idea of how to increase contrast with Curves.)

We now have our original desaturated texture and our higher contrast texture. we can bring these layers over to our main composition. Select both layers by holding Shift or Cmd/Ctrl and clicking. Now drag from the layers palette of the texture composition into the main document composition.

One of the first things we want to do at this point is make both of our texture layers smart objects. This basically will allow us to scale them without doing irreversible damage to the resolution.

Next, we want to set both layers to overlay for the time being, and turn off the “flat” layer. We can immediately see the difference that adding contrast has made. But again, we are looking for the texture to be a bit more grainy, so we are going to scale down the “contrast” layer so that more detail can be seen. Transform the layer, and zoom out until you see the edges of the texture. This could mean zooming out quite far, depending on how high resolution your texture is. Holding Opt/Alt + Shift, you can scale the texture layer towards the middle. You then can zoom in and take a look at how the texture is affecting the composition before you accept the transformation. Once you are satisfied with the look of the texture, press Enter to accept the transformation.

We will now add a layer mask in order to remove some of the texture from the center of the composition. Unlink the layer from the mask by clicking the chain between the mask and layer. (This will allow us to move the texture beneath the mask if we decide we want to scale it again, etc).

Take a basic brush with a fairly low hardness between 10-20%, and set the foreground color to black. Make sure that the mask is selected, and paint in the middle of the composition to remove parts of the texture. If you remove more than you intended, simply change the foreground color to white and paint over that portion again to restore it. This stage is very subjective, and can’t really be covered step-by-step; the main idea here is that you can use the mask to create changes, but that also you can undo those changes if you need to.



Once you get the contrast texture the way you like it, turn off the layer for now. Turn on the “flat” layer. If it doesn’t seem grainy enough, scale it in the same manner as the contrast layer was scaled. This will be the texture we apply to the inner portion of the composition, so that it doesn’t look too “cold” in comparison to the higher contrast edges.

Now duplicate the layer mask from the contrast layer by Opt/Alt-Clicking and dragging it. With the layer mask selected, invert it. (Shortcut: Cmd/Ctrl+I)
Now turn on all layers.


The “flat” texture towards the middle is a bit too strong for what we are going for; change the opacity of the layer from 100% to 30-50%. Do the same for the “contrast” layer if it is too strong. This is based on taste as well.

Adjust the masks and opacities until your desired affect is achieved. It is better in most cases to use textures in a subtle manner rather than as strong as possible. In this case, I ended up bringing the opacity of both texture layers down even further, and adjusting the masks slightly. The final product again is a matter of taste; this article’s purpose is to show you the flexibility that photoshop offers with regard to textures; now, instead of simply dropping a grunge texture onto a file, you can refine your use of textures.

Other tips:

• Only use textures if it makes sense to use them. If the interface doesn’t call for grunge elements, don’t use them.
• Expand your texture library to include color-based textures, fabric and paper, liquid, wood, metal, grunge, lens blur, lights, and many of thousands of other textures by researching for free texture sites online. The texture used in today’s examples is part of Andrew Kramer’s Riot Gear, which you can find here. Other great places to get textures include Lost and Taken, Bittbox, and CG Textures.
• Don’t be afraid to create your own textures! Sometimes, you can’t find the best one to suit your particular project. Pull out that digital camera, or borrow your buddy’s, or use a scanner.
• Contact FYI through Twitter @fuelinterface if you have any questions! We love to help.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

What is “user experience”?

User experience, or “UX”, is just what its name implies – the experience of the user. It is very important to treat this concept from a holistic standpoint. The user experience involves every feeling, notion, belief, action, and response that the user undergoes when in contact with your interface set, brand, or product. User experience extends well beyond the world of interface design (although it is extremely important within the confines of interface design). As a case example, we will discuss the user experience for Moe’s Southwestern Grill. For those of you who are not acquainted, Moe’s is known primarily for their tongue-in-cheek marketing, welcoming atmosphere, and ridiculously large burritos.

A customer follows a line of actions that the user experience team studies very carefully.

1. Initial information

For one to choose to go to Moe’s, they have to have some kind of initial information of Moe’s. There are many possible informants for companies, including:

• Advertisement (broadcast or print)
• “Window-shopping”
• Word-of-mouth

A good company makes sure that each of these initial informants provide the potential customer with the correct image and initial emotion and perception of the company. Advertisements will be created to match or further the branding and feel of the company, and to entice the target audience without being pushy. “Window-shopping” is when a potential customer who has never heard of Moe’s from any advertisement or word-of-mouth sees the actual company venue, and decides to give it a try. When speaking of internet user experience, window-shopping would be the use of a search engine to find a desired website, and is a far more common initial informant than advertising or word-of-mouth. (This statement only applies for online user experience.)
While both advertising and “window-shopping” are largely controlled by the company, the customers have complete control of word-of-mouth information. The company’s branding and product or service usually are the heaviest influencing factors on the word-of-mouth information, but in the end, what the customer has to say is not decided by the company itself. (This constitutes the importance of product reviews.)

So in the case of Moe’s, one like myself may have had a myriad of experiences with the initial informants before actually going and purchasing food at Moe’s. A mixture of advertisements and word-of-mouth were the final drawing factors.

2. Product and Service Experience

Product or service experience deal with every single aspect of the use and interaction with a company and their product or service (I know, that was a tough one to guess). This is where most companies place the highest emphasis. Studies show that it is much cheaper to retain a loyal customer than to try to gain new customers; for most companies, then, the initial informants are not nearly as important as the product and service experience.

It is important to note that the word-of-mouth informant is regenerated by excellent product and service experience.

Take the following (false) story for example.

One day, my friend Joe walks into Moe’s with a coupon ad in his hand. He is welcomed thunderously (”Welcome to Moe’s” screamed by the employees). The restaurant has a vibrant color scheme, and the menu is full of tongue-in-cheek humor. Joe pays a modest amount for a burrito and some chips. He sits down after visiting Moe’s infamous salsa bar and takes a bite out of his burrito. He is blown away! He finishes every last bite of his meal, all the while looking around the room at the odd phrases on posters on the walls, intrigued by the music, and most importantly captivated by the food he is eating. Immediately after Joe leaves the restaurant, he twitters about his amazing lunch at Moe’s. Later that day, while Joe and I are hanging out, Joe mentions one of the posters in Moe’s. This is my initial informant. I ask Joe if he liked Moe’s. Joe, obviously, goes on a 20 minute rant about his Homewrecker (for those of you who are unfamiliar, that’s a burrito). So I decide to go to lunch that next week with Joe to Moe’s.

In the example, Joe’s experience was good enough to entice him to tell someone else about the product or service. This is an extremely powerful, free way of advertising.

Often, product and service experience is reoccurring. This is particularly true outside of the food industry. Most of what we use on a daily basis will be used again the next day, week, month, or even year. Very seldom will we visit and use a website or store one time. This is a very important consideration for user experience teams, again because of the loyal customer to new customer price tag ratio.

3. Employee/Customer Interaction

Employee/customer interaction may not necessarily take place with every user experience, but it is definitely important to note aside from product and service experience. Employees are the face of a company more than anything else. It is therefore important to make sure that any interaction between an employee and a customer supports the company’s existing image, standards, and brand. Emplyee/customer interaction can take place in multiple ways.

• Product demonstration/”sales pitch”
• Technical support
• Customer support line (phone)
• Alternative support

An example of great alternative support can be seen by Charter Communications. While frustrated with a recent error on his bill, my same Moe’s friend (Joe) tweeted about it, mentioning Charter in his tweet. Within a few minutes, a Charter representative replied to his tweet, offering to help and to fix his bill. Not only was his bill fixed by the representative, but he received a credit on his bill as well. This greatly improved Joe’s user experience as a whole.

Conclusion

As we have seen, good user experience regenerates a company’s customer base. There is a line of actions that a person follows to become a customer with a particular company. It is of great importance to study that line of action and increase the quality of the user experience at all points, most importantly in the field of product and service experience. The user experience revolves around the customer’s experience with the actual product or service, and therefore should be central to the user experience team’s strategy.

These are the main points of user experience; there are thousands of different ways a person interacts with a company’s brand, product, and employees. Hopefully these basic interactions will help you better understand what user experience is, and will help you on the path to creating the best user experience for your customers.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

• An interface is the communicator between two different mediums of information; these mediums can be seen as senders and receivers, and may change from one to the other. Without the necessary interface, the information could not otherwise be transferred between the two mediums.
• Interface design is based primarily on function and purpose.
• Interface design should consider the economics of decision-making (people will take the shortest route to achieve a goal unless there is some kind of profit in taking a longer route).
  Creativity is secondary to functionality.

Okay, so we know all of these things. How do we go about making sure the interface we design meets these goals?

Information Architecture

This is a term that hasn’t necessarily been around for a long time. However, the practice of information architecture has been around for thousands of years. Information architecture, at its core, is the structuring of information. Surprised? Neither are we. But what a lot of people don’t know is that information architecture is the derivative of every decision made in the process of interface creation/design. Information architecture is the very beginning and core of any project. It helps define the who, what, where, how, and why of any endeavor. Some tangible pieces of information architecture include the wireframe/map of a website, library categorization/organization systems, and tables of contents. Why is this important to interface designers?

Centrality

For the interface to be effective, it needs to have a strong sense of centrality. This again is alluding to the functionality of the design. For centrality to be possible, there must be a system set up for structured creation so that content (meaning the actual design or execution of the interface) remains pointed towards the final goal. The backbone of a purposed design is the information architecture.

Things to note

1. “Architecture” in terms of information architecture is dynamically expandable
2. Information architecture is not limited to categorization. It can also include anything that steers the direction of the information (such as a mission statement, branding strategy, or goal set)
3. Information architecture is the setup of a system, not the content of the system itself.

With these things in mind, information architecture can be viewed as a conceptual or physical framework in which to build your interface. Information architecture, when practiced correctly, will allow for more functionality and expandability.

Get a little more practical, please.

Okay, so this all is a little conceptual so far. How about the practice of information architecture? How can you as an interface designer use these concepts to better your profession? Let’s look at the metaphor of the building of a house to understand a bit more about information architecture.

THE FOUNDATION
First and foremost, define the goals and the purpose of the design. This is a very important starting point for your architecture. Consider it your concrete foundation.

THE STRUCTURE

Next, consider all possibilities of the user experience. (This is particular to interface design, as not all architectures will require the consideration of “users.”) Put yourself in the position of the user, and ask yourself what all you need to achieve upon interaction with the interface. This will help define the rules of the interface, which is the structure of the house itself. The two-by-fours, if you will. As the rules are placed, you will begin to see how these different rules interact with each other, narrowing the decision-making process for you as the designer.

THE WALLS
Finally, once you have placed the rules, you will now have a framework by which to create your design. Consider this the sheetrock. The design itself will adhere to the rules and will never leave the goals and purpose (foundation).

THE DECORATION
Once the design has been created functionally, you now have the option of decorating it. You would never put a table blocking a hallway, would you? No, of course not. You still want the hallway to function as a hallway, and the kitchen to look like a kitchen. In the same way, you shouldn’t allow your artistic addition to a design stand in the way of its functionality. (For more on this, check out this post).

Conclusion

This post is not an attempt to give a full definition of information architecture, nor to go into detail of every facet of its applications. It is instead meant to shed light on the importance of information architecture systems when approaching the design of any user interface. What have you found through your use of information architecture systems? What are some creative applications for information architecture that have proven to substantially increase your productivity?

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

In part two, we will be discussing advanced interfaces. If you haven’t read part one, you may want to go back a step before continuing.

What is an advanced interface?

Remember the seventh grade science class about simple and compound machines? Let’s keep the ideas from that lesson in mind. If you didn’t, for some really great reason, take seventh grade, a simple machine is one of six varieties of objects, like an inclined plane or a pulley, that make work (the scientific definition, at least) easier to do. Compound machines take two or more of these simple machines and combine them to create a new machine.

Basic and advanced interfaces are similar to simple and compound machines. While a basic interface is limited to singular input and analysis process, advanced interfaces take advantage of two or more different kinds of input and analysis processes.

Actual Environment Interfaces

Actual environment interfaces are based on actions in which you are interacting directly with your environment. All interfaces utilize actual environments to some degree; from simple kitchen appliances to remote controls, steering wheels in your car to elevator buttons in your office complex, actual environment action-based interfaces exist all around us on a daily basis.

Simulated Environment Interfaces

Simulated environment interfaces are based on a digital platform, such as a computer or ATM kiosk. A simulated environment would be the “world” that the screen is showing you. In an actual environment, you would use your hands to push buttons, open folders, write words, etcetera. In a simulated environment, you use an actual environment interface (usually a mouse, keyboard, trackpad, and/or a touchscreen) to “push” the buttons, open folders, and write (type) words that exist in a simulated environment. The popularity of simulated environments has reached an all-time high because of the exponential advancements in computing.

Computers

So naturally, as we’ve already mentioned one category of simulated environment interfaces is computers. Here we are speaking directly of the personal computer. You are more than likely using one right now. Virtually everyone at least has access to one. Personal computers are the building block of most other simulated environments, and have been the cause and subject of many advancements in technology that allow for more powerful, faster, smaller microchip processing. Microchip processing is the basis for almost every simulation we experience daily. This is not to mention the thousands of other venues in which microchip processing enhances a product. (That’s another post entirely.)

Simulators

Some other common simulated environments include flight/vehicle simulators, in which the operator utilizes instrumental interfaces that look, feel, and react the same way as instruments in a vehicle would, and often show the response through one or more screens, as well as auditory simulation and “feeling” simulation (the shaking of a car or tilting during an airplane turn). Some of these simulators have been developed enough to use as training mechanisms for military personnel. Others are available as consumer software that often utilizes input devices, such as joysticks or steering wheels that plug in via USB.

Gaming Platforms

Perhaps the most popular simulated environment platform is video games. The industry of video games has grown tremendously since it’s initial instatement. The realism of the newest gaming consoles, such as the XBOX 360 and Playstation3, has garnered the attention of younger and older gamers alike. (We won’t ever forget our roots, Atari owners!)

Portable Devices

Let us not forget, perhaps the most widespread new simulated environment interfaces can be found on personal portable devices, such as cell phones and mp3 players. (Who else owns an iPhone?) Portable devices such as the iPhone and the new Palm Pre aren’t brand-new players in the game (PDA’s have technically been around since the 80’s), but have recently become more affordable and widespread, which has called for the industry to more competition to push the boundaries of the platform. With support from mobile networks that provide higher-speed wireless connection as well as Wi-Fi compatibility and Bluetooth advancements, portable devices have taken the limelight.

The Internet

Lastly, we must observe the internet as a simulated interface. The internet contains a vast amount of information, and perhaps most importantly, can be accessed from almost anywhere thanks to advancing technology (do you see a pattern here?).

Etcetera…

Okay, so there is no possible way we can list every kind of simulated environment here. We think you’re smart enough to get the idea though. :)

Overview

That’s a lot to take in (again). But let’s look at it simply put.

Basic interfaces include text and illustration, as well as our sensory analysis processes. Advanced interfaces take advantage of any combination of these basic interfaces. Advanced interfaces may include both actual and simulated environment interfaces, and deal with physical interfaces that the user interacts with, while simulated environment interfaces deal with an interface that the user seems to interact with by using an actual environment interface to control the simulation, such as a mouse and keyboard.

Make sure you check back to see the next installment of Interface 101! Also, leave a comment below to join the discussion!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Music

This is an extremely important variable to anyone whose job includes considering their users. Why is it so important? Because most of the time, music is a voluntary auditory input. If you want to get to know your user, one of the best ways is to find out what they like, and what they choose; musical taste can, because of its voluntary nature, be very revealing into the likes and dislikes of a person as a whole. For instance; if your user base is made up of fans of mellow music from genres like jazz or piano-based classical, you may want to consider a classy, smooth interface that visually focuses on contour and flow. This is not only because the sound of mellow music often produces a mental picture that is flowing and smooth, but also because music often divides people into subcultures, which have similar tastes and style preferences that are unique to the subculture.

It should be noted that subcultures are not always formed because of music, and that music is not the only defining factor; however, some music has stronger subcultures than other music. Particularly hardcore/metal, jazz, folk, indie-electronica, indie-rock, rap/hip-hop, and “emo.” These genres sometimes even create subcultures of people who are referred to simply by using the name of the genre as an adverb (i.e. “He is indie” or “She is hardcore”)

Because of the incredibly revealing nature of subcultures, music preference is a very important consideration to the study of your user’s experience in relation to their audio environment.

Voice/Language

Language is, as we covered in this post, one of our most basic ways of communication. But what else can we learn from language?

We know that most languages have different accents, which change the dynamics of the language itself. So let’s speak strictly on an aesthetic/auditory basis. When someone speaks, their voice has different properties of range, harshness, tone, timber, and pronunciation. These different qualities affect the human mind’s perception of a certain message both on a conscious and an unconscious level. I am reminded of a great Arrested Development episode in which the main character Michael Bluth cannot resist Rita, who has the mind of a young child. Why is he so attracted to her? He doesn’t realize her mental impediment because of her British accent. It is very common for language and accent to effect the message of verbal content. Often, southern accents in the United States connote hospitality, while northern accents connote intelligence. Usually, however, these positive connotations are also often accompanied by negative connotations. Southern accents connote lower intelligence, while northern accents connote impatience. Note: these are only a few of the many different kinds of language analysis and possible connotations that result from language

Different languages also sound “harsh” or “smooth.” Good examples of this would be German, a generally harsh language, and Spanish, a generally smooth language. A harsh language has harder, more defined syllables. A smooth language has softer, less defined syllables. Harsh languages have more contrast between syllables, while smooth languages flow easily from one syllable to the next.

So what does this mean for interface designers? First of all, consider your audience and their place of origin. Certainly, a person with a southern accent would be less-inclined to grab a hold of the connotation of lower intelligence as a result of his or her accent. If it is appropriate, allow your design to fit into the cultural divisions that are a result of language differences. If your audience speaks a harsh language, their minds are most likely more apt to deal with higher contrast; however, you may want to consider offering a refreshing change of pace by using a lower contrast, smooth design. Similarly, if your audience is Southern, they are probably used to the ideas of hospitality and simplicity. It may be profitable to provide them with a design that is faster-paced, or you may want to make something that flows with their current mindset: slower-paced and simple.

Conclusion

There are, unfortunately no hard-fast rules or proven constants when it comes to audio analysis and the significance of that analysis to interface design. Each interface requires different user analysis, and each interface will provide different results for that analysis. This article is meant to get you thinking about the possibilities that come through the analysis of your user’s environmental audio, both voluntary (such as musical preference) or involuntary (such as voice or language).

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Before we dive deep into which icons are most effective or best practices of interface development, let’s cover some basics, shall we? Interface 101 is a basic training on the terminology and theory of interface design. In the first two installment, we will discuss just what an interface actually is, and the differences between basic and advanced interfaces.

The word interface has many meanings and many different uses for unlimited contexts. For web designers, interface means something almost entirely different than for audio engineers. What, then, is an interface?

Definition of an Interface

Interface is defined as a “surface regarded as the common boundary of two bodies, spaces, or phases.” In other words, it is the communicator between a sender, a medium, and a receptor. The sender may be any object or person, or digital representation of an object or an action. The medium is some type of information, and the communicator allows this information from the sender to make sense to the receptor. The receptor may be any of the same things that the sender may be, and may become a sender to either the previous sender or a new receptor. (That’s a mouthful, isn’t it?) Here is a graphical representation of what an interface does, and what senders/receptors are.

So what are some different kinds of communicators? We will look at basic interfaces in this post, and advanced interfaces in the next Interface 101 post.

Basic Interfaces

Some of the most basic interfaces are also the most ancient. Perhaps the most important basic interfaces are writing and symbols. People have been communicating information to one another through glyphs and illustration for over 6,000 years. Writing can communicate information that would otherwise be spoken or shown through gestures between two people; however, when combined with other tools, such as the internet or mass production printing, written words of one person can be communicated to the whole world, becoming a very effective, yet still basic, interface.

Writing and Illustration

Writing and illustration have greatly advanced over their 6,000 year life-span. Now, there are thousands of languages and dialects, each with their own rules of writing. Beyond the different languages, there are hundreds of thousands of different typefaces and their varieties. Each of these communicates in a different way, and therefore changes the message, however slightly or heavily, of the interface.
Writing and symbols are two kinds of interfaces that act between information and the human mind. Another example of an interface that acts as the communicator between information from one person’s mind to another is speech.

Human Senses

Each of our senses also provide us with ways of gathering information; our brain interprets what we see, hear, smell, taste, and feel through the interface of our eyes, ears, nose, taste buds, and nerve ends.

Conclusion

These basic interfaces can give us very important insight into the design of more complicated interfaces, and therefore they are extremely important to remember in the process of developing an interface. What language are the users speaking? Not necessarily literal language (although that is quite important as well… obviously) – rather, what is the most effective way to communicate to the user of a certain interface? How can you as the designer make sure that the look, feel, or sound of your interface is compatible with your user? Is the design of your interface aesthetically productive to the message you are trying to get across? Is it standing in the way, somehow, because of the aesthetic aspects? These are questions that can be birthed and used to give users a better experience by examining the importance of these most basic interfaces.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)