Getting Started with Interface Design
sessions

Getting Started with Interface Design

In this article we look at five fields that you should aim to learn more about in order to rock at interface design. These fields include Experience Design, Interaction Design, Information Architecture, User-Centered Design, and Graphic User Interface (GUI) Design.

This Post is Day 1 of our Interface Design Session. Creative Sessions

Introduction

Remember when web designers created sites or applications based on what they thought looked good and worked well? That thought process, although sometimes still implemented, is a thing of the past. The field of interface design focuses closely on the user, the person who will actually be using the interface, rather than designing for the designer.

Interface design is not a new concept. People have been designing for as long as products have been made. The sectors that are relatively new are the ones that have made interface design better. Let’s take a closer look.

Experience Design

Everything you do results in an experience, so why not craft what we do more carefully to maximize those experiences? Experience design does just that.

experience design

Experience design is a relatively new and upcoming field. As with any new field we’re seeing the explosion of buzz word usage around the web, but it’s important to understand what is actually being discussed. Many user experience veterans state that many people are tagging the UX letters onto their resume or services page but still struggle to actually define it.

Experience Design is discussed on A List Apart’s blog by Bob Jacobson. He states:

Experience designers strive to create experiences that produce desired perceptions, cognition, and behavior among their clients’ “users,” “customers,” “visitors,” or “audiences.” Under the experience-design rubric, designers of many specialization successfully work with each other and with non-design professionals.

Whitney Hess, a remarkable user experience consultant, wrote a great article debunking 10 common myths associated with user experience design. If you’re new to the idea of UX design then this is a great place to understand the common misconceptions.

Learn More

Interaction Design

Interaction design, like IA, has an organization associated with it called The Interaction Design Association (IxDA). IxD is often quoted to be the field that drives users to a particular action. This quote is from their website:

“Interaction designers strive to create useful and usable products and services. Following the fundamental tenets of user-centered design, the practice of interaction design is grounded in an understanding of real users—their goals, tasks, experiences, needs, and wants. Approaching design from a user-centered perspective, while endeavoring to balance users’ needs with business goals and technological capabilities, interaction designers provide solutions to complex design challenges, and define new and evolving interactive products and services.”

IxD

As new interfaces have presented new problems to solve this field has grown. IxD has evolved to help facilitate interactions between people and the environment that they interact in. Typically IxD only deals with interactions between users and computers, commonly referred to as human-computer interaction.

Some major concepts that online interaction designers focus on include goal-driven design, “interface as magic,” usability, and learnability. Goal-driven design understands that there are constraints in an interaction and must formulate a solution. When someone visits a website they have goals they want to accomplish. IxDs understand these goals and helps ensure that they are easily accomplished.

The idea of “interface as magic” is easily explained by saying that the best interactions don’t exist, they don’t make the users think, and just work. Usability is characterized as the ease of people’s attempts to achieve a goal. Learnability is made up of familiar concepts. These include things that you typically do on your OS and on the web, be it close a window or scroll down the page.

Learn more

Information Architecture

Information Architecture

IA has been described as optimizing for the way people think. Explaining information architecture has been abuzz lately with the Explain IA competition hosted by the IA Institute. The great entries that rolled in could probably do a better job explaining the field than I could.

Information Architecture is a process that could largely go unnoticed to the untrained if it’s done well. However, if it’s lacking then the frustration it can cause is obvious. Information Architects organize information. The IA Institute defines it as: “The art and science of organizing and labeling web sites, intranets, online communities and software to support usability and findability.”

But what exactly do they do? They research the audience and business. It is important to learn as much as possible from users and stakeholders. They may do this through card sorting, usability tests, and user polling. Taking that knowledge gained they then analyze the data. In this step the IA works hand in hand with the designers and developers to help realize the goals gained from research. Finally, in simple terms, they develop labeling, navigation, and site structures. They do this through site maps, site-flow diagrams, and wireframes to help illustrate how the site will flow from a practical perspective.

Learn more

User-Center Design

User Centered design is a a process of design that considers the user every step of the way. It involves many of the other fields that I describe in this post but as a whole is a technique that spans from planning your site to writing content that focuses on the needs of your users.

user-centered design

The process could include planning your site, collecting data from users, developing prototypes, writing content, and conducting usability testing with users. Usability.gov describes the first step to involve clearly defining your organization and users’ needs, goals, and objectives. With these things documented and in mind, then a design no longer takes on the shape of what a designer perceives as what users might think, but instead what the users really need.

UCD diagram

Cennydd Bowles makes a clear distinction in his blog post The perils of persuasion when comparing User Centered Design to Persuasion Design. He gives a great example when saying that UCD aims to increase user efficiency and in turn will create more word of mouth referrals. The goal is not to drive traffic through marketing, where the results are much easier to measure. Of course this lack of analytics available often creates an environment where it is hard to sell UX.

Learn More

Graphic User Interface (GUI) Design

Someone has to take all of the research and informed design decisions and make them attractive and on target, right? The first thing many people think of when considering GUIs may be the interfaces of the future portrayed in movies such as Iron Man or Minority Report.

Iron Man 2 GUI

Graphical User Interface doesn’t just consist of graphic design, however. It cumulates all the ideas covered in other fields into a final (hopefully usable) interface. Graphical User Interface design accomplished a very important aspect of interface design, this is where the interface is created and designed for users to interact with in more ways than just typing. The GUI, being predeceased by other fields, brings together the final project for the users to see.

A classic example of GUI design is one of the operating system. The user interacts with the application which interacts with the operating system, which interacts with the hardware – and vice versa. This series of interactions is made possible by the GUI.

Learn More

Closing Thoughts

I’d like to leave you with this thought by Luke W. found on InspireUX:

Designers spend much of their time thinking through problems from the ‘outside in.’ Contrasted with the ‘inside out’ approaches that typify corporate business agendas, this methodology focuses on the perspective of customers and end users when analyzing and crafting solutions. Applying this perspective to strategic work creates more genuine relevance.”

As you go forth on your next interface design project I challenge you to think about each step you take. Ask yourself what fields you could learn more about to make your interface that much more effective.


This Post is Day 1 of our Interface Design Session. Creative Sessions

Tags: Sessions
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.jeba.in Jeba

    wow! great article.. just on time.. :)

  • http://create.cm Matt

    Nice post, much enjoyed the read. i’ve been looking at UI design alot recently

  • http://www.digichroma.com Aryan

    Would like to see more video tuts. Thanks!

  • http://freecss.info CSS Tutorials

    This is my kind of designing. Most people only hire me for interface work.

  • http://jacobdubail.com Jacob

    Great intro to each of these fields. Thanks for all of the links to more resources. I expect my browser to crash any second from all of the tabs I have open…

    Looking forward to part 2.

    • http://www.matthewkammerer.com Matthew Kammerer
      Author

      Heh, I hope you enjoy all the resources :).

  • Chris

    This is great. There isn’t a whole lot of known information out there on this kind of stuff… at least that I have found. Thanks!

  • http://connorcrosby.me Connor Crosby

    Great intro! Love the video.

  • http://www.jeffadams.co.uk Jeff Adams

    I do alot of UI design, in fact all my Themeforest templates are Admin skins because I absoloutely love it!!!

  • http://www.davidchicopham.com david chico pham

    Solid article. As a follow up, I’d like to see some nuts and bolts in creating some these concepts into real life stuff. For example, when talking about interaction design, a how-to build guide for an interface on a basic site would be welcomed. Thoughts?

    • http://www.matthewkammerer.com Matthew Kammerer
      Author

      That’d be a great follow up article. I’d really recommend Rosenfeld Media’s books for in depth looks at UX processes like that. Check them out here: http://www.rosenfeldmedia.com/

  • http://scorpiono.com Scorpiono

    Nice stuff Matthew, thanks!

  • http://www.loudamedia.com James Scott

    Really looking forward to this series. This is a totally different way of thinking for myself when it comes to me designs.

  • http://spotdex.com Davidmoreen

    I would like to consider myself good at UX, but I never got much feedback (specifically UI) from the people that use the things I make. This sounds like a really interesting series, one that has good information!

  • DED

    This is a great introduction. But, you left out the contributions from the field of Human Computer Interaction where much of your source material is derived from. Like the work of the cognitive psychologist Don Norman, or HCI guru Ben Schneiderman.

    For people in search of material and having trouble finding it: Some of the best books are
    “Designing Interfaces” by Jennifer Tidwell ( it’s a collection of design patterns with explanations and examples of when to use them).
    “Designing the Obvious” by Robert Hoekman Jr.
    and
    “A Project Guide to UX Design” by Russ Unger and Carolyn Chandler.
    There are also quite a few text books, but they are expensive, so maybe not applicable unless you plan this area as your career.

    • http://siriomi.com Binaebi

      I’d also encourage people to read Sketching User Experiences by Bill Buxton and The Design Way by Nelson and Stolterman.

    • http://www.matthewkammerer.com Matthew Kammerer
      Author

      Ah, you’ve caught my lack of formal training. Those are great recommendations and I agree HCI is an important topic to cover when considering the field.

      Thanks for the comment!

  • Christ

    Great post !! Very interesting (as usual :) ). I wish a I had a gui like iron man’s =)

  • mario dcunha

    awesome post… a first lesson for beginners in the design world…

  • http://www.ifadey.com Fawad Hassan

    Excellent article. Specially I like the references you gave under each topic. Very informative :)

  • http://pebam.info Pritam Pebam

    Simply great with links to more articles.. this is cool.

  • http://www.jordanwalker.net Jordan Walker

    Excellent write up for UX. I look forward to the follow up article.

  • http://www.freelancemachine.com Alex Cooper

    Great post. This gives me a good place to get started.

  • http://www.youngdesign.com.au youngdesign

    I’ve become a big fan of Interaction & Interface design recently… maybe I always have been but the buzzwords are helping me realize it?!

    I can imagine certain people will become real specialists in particular fields, but I feel that all designers should be learning every one of these design areas. They all need to be understood to some degree, and in doing so – design will become truly excellent.

  • neil

    Nice explanation. Can you put something up about service design also?

  • http://www.twitter.com/gutomezencio Guto Mezêncio

    Great explanation! =)

  • http://www.bitcsounds.com Essex

    This will be a great website, would you be involved in doing an interview about just how you created it? If so e-mail me!