Posts Tagged ‘information architecture’

The difference between UX and UI and what it means to your customers

Posted on: July 27th, 2012 by Fransgaard 1 Comment

The original version of this article can be seen at the award-winning Capgemini – Capping IT Off blog.

For this article I’ve enlisted my boss Windahl Finnigan, who heads up the Capgemini UK UX team and we’ve been discussing for a while about how to best describe the difference between User Experience (UX) and User Interface (UI) as the two are often confused with each other but they are vastly different entities.

A well-used example is that riding a horse is the User Experience while the saddle, the bridle, etc is the User Interface.

However, riding the horse is actually better described as an Activity that forms part of the overall User Experience.

The User Experience is everything that covers the full experience and everything related before, during and after the ride: The track, getting to and from the track, the thrill of the cheering crowd , looking at the photos of you flying off the horse days after the actual ride and so on.

Riding the horse may have been great and getting thrown off was a fun (and somewhat humiliating) lesson that made you respect skills of seasoned riders.

But two weeks later your leg still hasn’t recovered from the fall, you call the stables but they won’t even listening to you quoting disclaimers you signed when mounting the horse… Suddenly the User Experience of the ride is quite different.

However, the User Interface (the saddle, bridle etc) remains the same as before the change in perception of the User Experience. The materials and tools haven’t changed.

The best way of describing a User Experience is you cannot perceive it while you are in it. Only after it is over can you comprehend and review the User Experience with the benefit of hindsight.

What it means to your customers

A good User Interface creates trust. Trust that the site will work, trust that the company offers a professional User Experience as promised by the professional looking User Interface. But without applied User Experience Design it only forms a single step in a what is a multi-step process. Not having the other steps can leave the user feeling unengaged and with no clear direction or encouragement.

A good User Experience nurtures customer loyalty by creating a consistently good experience throughout the user’s journey no matter what path they may follow. The User Experience delivers on the promises of the professional looking User Interface.

Why User Experience has emerged as such an important craft

In the early days of the web Graphic User Interface Design, User Experience Design, Information Architecture, Frontend Development and more were all the responsibility of a single role: The Web Designer.

Today, the tasks are split out into a range of roles for a number of reasons:

  • The digital industry has grown immensely in a short period of time. So has the digital projects and their importance to the businesses. Where a digital presence used to be a fringe investment, it is now part of the core business model.
  • Each area of expertise has grown ever more complicated to accommodate for the explosive growth of the web estates. No need to look further than the backbone of the web: HTML. The first version had only 50 tags in total! Today we have a much more extended toolset in HTML5, CSS3, Ajax, Javascript and serverside scripts like PHP and ASP etc. It is a full-time job to learn and keeping up with just this single facet of the industry.
  • In the early days the User Experience was limited to a single website. Today it extends across a range of delivery mechanisms and channels: Websites, Digital Marketing, Social Media, not to mention Mobiles, Tablets, Interactive TVs, Games stations, Touch Screens etc. As such maintaining a consistent User Experience across is a complex task involving Creative Skills, Strategic Thinking as well as Psychology, User Research and much more.
  • And last, but absolutely not least, there is the expectations of the Users. While the web has grown ever more complicated, the Users have equally grown more impatient and demand simpler and faster experiences. As Steve Jobs, the former CEO of Apple, said: “Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it’s worth it in the end because once you get there, you can move mountains.”

So what about Customer Experience vs User Experience?

The term “User” has become associated with digital interfaces where the word “Customer” feels more at home in traditional marketing/CRM/PR terminology. But the fact is due to the impact and integration of the Internet with everything, the experiences on- and offline are naturally flowing together into a single Experience.

In practical terms Customer Experience and User Experience are for most parts interchangeable. The main difference being User Experience has a wider reach as a Customer is automatically a User of the Experience, while a User may not necessarily be a Customer (they could be a competitor, a colleague, a partner etc).

The important takeaway from this article is the difference between User Interface and User Experience as the former is only a single step of the full path that is the latter.

Tips for print designers about web design

Posted on: June 14th, 2010 by Fransgaard 4 Comments

Fact:
web design requires both more skills and intelligence than print design!

…that is ofcourse not true… but the two disciplines are increasingly growing further and further apart and I firmly believe you cannot be awesome at both and have so far not seen any proof of the opposite.

While I come from a print design background I would never attempt to make professional print design as I don’t think my rusty Quark Xpress 3 skills would take me very far.

Vice versa print designers struggle with digital concepts such as low resolution fluid and flexible layouts and the dreaded navigation.

Still once in a while I receive web designs made by print designers who grab such as opportunity as a fun break from their normal tasks, a chance to add another tick to the CV: Web design.

I have yet to see a design from a print designer which can be translated painlessly to the digital space and often it is the most basic stuff that is lacking.

So here are some things to look out for as a print designer designing for web:

Software:

  • Only use Photoshop or Fireworks.
  • Do not use inDesign.
  • Do not use Quark.
  • Do not use vector-base software such as Illustrator (unless you pull the illustrations into Photoshop).

Colours:

  • Only use RGB.
  • Do not use CMYK.
  • Do not use Pantone.
  • Make sure your Photoshop is using correct colour settings. Check with your web designer.

Resolution:

  • Use 72 dpi.
  • Do not use high-res of any sort.
  • It won’t work online.

Document size:
If in doubt work with a document that is no more than 960px wide. This will work in most screen sizes. The most common screen size is currently 1024px wide and 768px high. using 960px gives room for browser chrome such as scrollbar.

Height is less important but for pages that are designed to work as sign posting, such as homepage and landing pages, aim to keep most important stuff within a height of 550px.

Information architecture:
Use pen and paper to scamp out the structure of the site. Some times it helps writing each element of the site on a PostIt note and move them around on the table until you have a grid that you are happy with. This is especially a good exercise for homepage and landing page designs.

Scalability:
Make sure your design can scale. This is one of the more difficult concepts about web design. nothing is fixed on a web page. Everything can shift around at the users whim. Things to look out for is:

  • Don’t design elements to have parts outside the screen unless you have a plan for how this will look in both smaller and bigger screens
  • Don’t design text boxes to have fixed height. It won’t work. The font-size can be changed by users and the amount of text can change as well. Aim to create text boxes that work with both font-size twice the size of your designed font size and half the size of your designed font size.
  • Don’t assume anything will stay exactly where it is. Keep the position of design elements loose and flexible.

Navigation:
This is the most important feature of a website. Without it the site fails.

  • First of all make sure you design a navigation. (Yes, I have seen designs coming through without).
  • Do not think linear about a website. Users will not go from page 1 to page 2 etc. They will jump randomly around between content. As such all content should be able to stand alone.
  • Make sure the navigation is clearly marked as a navigation.
  • Make sure it stays in the same place on all pages.
  • Aim for approximately 5-7 main navigation items.
  • Make sure to include the most basic navigation items such as Homepage and Contact Us.
  • Aim to include a search box

Legibility:
Due to the massive variation in screen quality you cannot rely on everybody seeing the same as what appears on your 27″ Apple screen so make sure your web design is legible. Check the following things:

  • Good, basic typography. Tips here: webtypography.net.
  • Big enough font size. As a rule of thumb you should be able to scale the font size down twice in a browser and still be able to read it.
  • Good enough colour contrast. A good tool to measure this is the Colour Contrast Analyser.

User testing:
Take a break while designing and force yourself to think like a private, non-professional individual and ask you this:

Would you use this site at all? Or would you go to the competitor?

Ask people around you the same question and encourage them to be honest but also ask “why?” if they reply with negative comments. If you ask people who fit the site’s actual target group then the better, but anybody is better than nobody.