UX Deliverables and Assets

The difference between UX and UI

Leave a comment

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.

Leave a Reply