Tag Archives: UI

Interaction design vs. User Experience design

Yes, folks, there are still many industries and companies that do not understand the difference between interaction design and User Experience design. You would think that major corporations would have grasped the differences between the concepts by now. Alas, through my recent review of job descriptions, there are many companies, especially in the Dallas area, that say they are hiring a UX designer, but what they actually want is an Interaction designer.

Jennifer Blatz UX design. User Experience Design is not User Interface design.
UX is not UI

Many in the field of User Experience are familiar with the above chart. Perhaps, like me, you had to include this in a presentation to educate your client or co-workers. Despite the fact that there is some level of maturity in the field of UX, there is still a lot of confusion between the two.

As I mentioned before, I was recently perusing job descriptions for a UX designer in the Dallas area. I was noticing a trend:

  • The job title said UX Designer
  • The job description listed skills like research, strategy, wireframes and usability tests
  • It also said they company was looking for deliverables like personas, user flows and wireframes

However, upon further investigation, I discovered that these companies do no really want a UX designer, they actually want someone who is specifically a UI designer.

Jennifer Blatz UX design. User Experience Design is not User Interface design.
Interaction design actually falls under the umbrella of UX design.

It is completely OK to want a UI designer. Nothing wrong with that at all. But I feel like these companies are just copying other job descriptions and applying them to their own organization. (This is the same reason why you don’t just copy someone else’s design without understanding the context and reasoning as to why they came to the solution they did.) To me, just swiping a job description from another company and finessing it slightly so it sounds like your own is just lazy. I think it speaks leaps and bounds to the level of UX Maturity within your organization. Even if you are a large corporation with thousands of employees, or a highly respected agency with many high-end clients, you should know the difference between UX and Interaction design. If you don’t, shame on you!

My advice to companies is this: if you are looking for an Interaction Designer, just say that. Ask for skills like visual design, user interface design and interaction design. It is OK to be that specific. No need to pad up the job description pretending you wants skills like research, personas and task analysis. You, Dear Company, don’t really want those things. So be specific in your requirements and you will get the ideal candidate that much sooner. You will not waste your time or a potential job candidate’s time if you are more accurate in your job descriptions.

Journey map to understand the flow

Customer journey map, user flow, Jennifer Blatz UX Design
Understanding how the user will go through a process makes for a better design.

When a UI designer is assigned a new feature to build, it is crucial that you understand this process from the user’s point of view. You might think, “Oh I know all the steps the user will go through. I have it all in my head.”

Well I am here to tell you probably don’t have all of the steps the user might go through in your head. This is the advantage of creating a Journey Map. Call it what you will:

  • Journey map
  • User flow
  • Flow chart
  • Task flow
  • Customer journey map
  • Experience map

To me all of these terms are very similar. Yes I know I am bastardizing these terms by clumping them all together as one item. I understand there are difference in these terms and when they should be used. However, the point I want to make is just think about how the user will go through the process and make some sort of illustration to show these steps. You don’t have to use some fancy software like InDesign or Omnigraffle. Go completely low fidelity and just sketch it out on pencil and paper.

There are benefits of sketching the user flow on to paper and get it out of your head:

  • You think you have thought of all of the options. Well you have not.
  • You will discover unknown unknowns.
  • You might leave out a step when it’s left in your head. Drawing each step really fleshes out the process.
  • There will be additional avenues you have not considered that only sketching will bring to the surface.
  • It forces you to visually consider the options and how many additional steps those option might provide.
  • It illustrates how complicated a user flow can get. It’s often more detailed than we thought.
  • As with all sketches, it provides a great communication tool that you can then show to your team to continue the discussion.

So before you start designing any software, or mocking up any of your fancy ideas in Photoshop of Sketch, take a few moments do perform this crucial step of creating a  Journey map / User flow / Flow chart / Task flow / Customer journey map / Experience map. It’s a great idea to get any thought floating around in your head on to paper.

The difference between UX and UI

I find that User Experience and User Interface are often used interchangeably. I was not even sure that I understood what the difference was. So I decided to do a bit of research on the internets and compiled a brief list describing each discipline. I know these are long lists. If you have some comments, please share with the group.

User Experience

  • UX is the overall experience one has with a product or service, which can include a UI.
  • User Experience is how they feel when they look at the site, aka the broad scope.
  • The interaction itself
  • Includes interfaces
  • Addresses all aspects of a thing as perceived by a person
  • UX architecture intelligently provides for the user’s interactive experience via features and functionality of a software-based product or service.
  • UX-er is known as the primary user-advocate on a team
  • UX informs creative
  • Developers are building what UX is architecting, and creative provides the visual look-and-feel based on UX architecture and brand requirements
  • UX design is all the methodological steps that lead you to the conclusion on how to design the UI. They are responsible for how they feel when interacting with the interface or product.
  • Generally start by conducting user research and interviews. The goal with this is to understand exactly what the users’ needs are.
  • The wireframes are essentially the blueprints of what the UI designer will use to create the interface that the user interacts with.
  • One who designs the user experience for applications after doing user and workflow analysis, producing user-centered design artifacts such as personas, site maps, taxonomies, and wireframes. A UX Designer may also conduct usability testing on prototypes or finished products to assess the quality of a user experience.

User Interface

  • UI is typically a combination of visual design (the look and feel) and the interaction design (how it works).
  • User Interface design is the part of the product that faces the user when he looks at the site.
  • A tool
  • A point of interaction
  • A means of communicating between a person and a system
  • UI (aka ‘GUI’) visual design is the graphical user interface of a software product/service
  • The GUI is the visual layer informed by the UX architecture, but based on branding/style guide and visual design principles.
  • The design of a GUI should be heavily informed and guided by the problems that were solved during UX process.
  • GUI deliverables include mood boards, sketches, mockups, visual toolkits, final art assets and even CSS specs.
  • Interaction Design is the grey area between UX and GUI design.
  • Interaction, in our vernacular today, refers to the motion between states of controls and states of an interface.
  • Innately understand and prioritize what is best for the user and also understand the mechanics of physics and motion design; they also understand the capabilities of current dev tools such as CSS3 and HTML5
  • User Interface (UI) Design generally refers to the user facing side of any type of physical interface
  • A UI designer is responsible for everything that a user will see on the interface.
  • UI designer’s responsibility to understand what the users’ needs are. They must be able to arrange the interface in a simple way that allows for the best user experience.
  • One who builds user interfaces that support the exchange of information between an application’s users and its back-end processes and databases.
  • UI Developer’s output is functional, testable, shippable code that lets users accomplish their goals when using an application. The UI Developer is also responsible for documentation that allows others to maintain their code.
  • A UI designer may have the ability to create interactive designs, icons, colors, text, and affect a number of other elements that solve problems dealing with direct interactions to the user. Those elements are fantastic tools to affect user experience but they are only part of the equation.
  • The very minimum:
  • Learn HTML & CSS. Learn Photoshop. Learn basic typography.  Learn basic color theory.  Learn about layout.  Get a feeling for producing UX deliverables.  Learn about usability evaluation methods.  Learn the best practices for web design. Understand the difference between designing web sites, web applications, mobile applications, desktop applications and experiences.