eric-boone/ux_ui

An Introduction to User Experience and User Interface Design

UX_UI

An Introduction to User Experience and User Interface Design

Demystifying UX and UI Design

“User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success.” — As Rahul Varshney, Co-creator of foster.fm

UX / UI

How do we know which is which? With so much talk amongst the tech and design communities, it can be hard to find working definitions upon which, everyone can agree. So, in an effort to untangle these different subjects, I itemize the elements of each, UX and UI, into their respective camps.

User Experience

UX design is the process of determining exactly what your product is going to achieve and what elements are necessary to include in the interface, and by extension the back-end, in order to make this happen. Common example of UX elements include: input forms, navigational menus, search bars, as well as considerations such as will this be a one page web app or many?

User Interface

UI design is the styling, branding, graphics and media of the interface. UI design is the process of determining exactly how to style the interface in a way that makes the product fun, interesting, easy, and/or exciting to use. Common UI elements include: color, animations, shape, line, size, positioning, and graphics.

What’s the difference?

If you imagine a product as the human body, the bones represent the code which give it structure. The organs represent the UX design: measuring and optimizing against input for supporting life functions. And UI design represents the cosmetics of the body--its presentation, its senses and reactions. — http://blog.careerfoundry.com/the-difference-between-ux-and-ui-design-a-laymans-guide/

What are the similarities?

They both require a deep understanding of their users. For this designers use tools as simple as creating user personas or as complex as creating psychographic profiles. Both are responsible for making sure that the user journey (whatever it course it may take) leaves the user feeling good. Here’s an example of how UI and UX designers may work towards the same goal from different angles.

Ex: Input forms

Problem: Need to acquire lots of personal info, across multiple input fields without the user losing interest and or skipping input fields.

Solution: The principal of this solution will be to get as much information from the user as possible without losing them or ruining their experience.

UX Solution: Take out an input field, entirely eliminating that data point from the interface and DB. Space input fields out over the course of the app or across many different pages. The elements of the UI solution include the changing of the application architecture.

UI Solution: Add animations to make more interesting. Add copy to make more sympathetic / funny. Include graphics or editorial illustrations to add personality. The elements of the UI solution include animations, colors, fonts, etc.

Point: Both UX and UI designs are perfectly capable of tackling the input form problem. The direction you choose to take with your product will depend on the needs of your users and your business.

What about Look and Feel?

UI cannot simply be described as the ‘look’ of a product. It’s the behavior, its the logic that takes inputs and gives outputs, or it could even be a sound. And ‘feel’, contrary to belief, is not accurately summed up as UX. Feel is the highest level reaction of our users to a product. The feeling our products elicit is a culmination of absolutely everything. From the accuracy of the information (google maps) to the frequency of pop ups (spam sites) to the ease of use and clarity (insert poorly designed website) to the speed of the app and even to how clever the copy in the interface is. [more on copy-writing towards bottom]

Key Take-Aways

UX and UI are distinct. Their disciplines are deeply intertwined yet surprisingly unique. Each plays a major roll in establishing the overall ‘look and feel’ of a product. While UX people need to be more concerned with the application architecture as it relates to the goals of the business, it is up to the UI team to make sure that the interface is worthy, exemplary, and communicative of the businesses brand and persona. UI folks are generally more concerned with colors, fonts, and graphics while UX people are generally more concerned with loading times and bread crumbs. Going forward, into many fierce debates over the true meaning of these two terms, remember that every single case is different and will thus require a bit of inspection when determining whether something falls into the UI or UX category.

PART II

Basic Guidelines for User-Friendly design:

Going in:

Before you design anything you must first identify the problem. Until you have pin-pointed your problem, you cannot begin to devise a solution. Given the type of design challenge you are facing, your design will take on a certain function or purpose that somehow solves the problem at hand. This function is know as the design principal. All of the individual elements or assets that fit into and support the principal are considered design elements.

UI:

What is the objective of UI design?

To communicate information to the user as simply and clearly as possible.

• Always keep a high contrast between your text and the background. Readability is everything.

• Keep a visual hierarchy. People will not know how to parse your information unless it has consistent formatting and a clear, well-established visual hierarchy.

• Rule of thirds. People like things in threes. It is harmonious and atheistically pleasing. http://designmodo.com/rule-thirds-grid-outline/

UX:

What is the objective of UX design?

To create a product that is simple to use from end to end while providing maximum utility.

• Always give your user the ability to know where they are and to navigate your product as simply and easily as possible without them getting lost along the way.

• Give them the impression that they have full-control.

Universal Design Principals

Deference. The UI helps people understand and interact with the content, but never competes with it.

Clarity. Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design.

Affordance. "...refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used. […] When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed." (Norman 1988, p.9)

Depth. Visual layers and realistic motion impart vitality and heighten people’s delight and understanding.

All-Too-Common Conversations

Use Case:

Use case is an example of a user using your product. What will the most common use cases be? Need to account for almost every case you can so that no loose ends aren’t left untied.

How do you understand your users?

Create user profiles. they can be as simple as archetypes or as complicated as psychographic profiles.

The dreaded NULL use case!

Our job as UI and UX designers is to make sure that there is never a NULL use case in which a user gives input that receives no output or is directed to a dead end with no return options. Believe it or not, NULL use cases are you friends. They are tragically unavoidable given that no app can support every single bit of input. To solve this, we turn these seemingly terrible use cases into positive experiences through the use of some clever UI designs such as copy, illustration, animation, color, etc. One great example of a negative use case becoming positive experience is the picture of a hamster chewing through a wire that yelp shows whenever the connection is lost.

A note on Copy-Writing

The most important part of any UI is the copy (words). The entire point of the UI is to get the user to read the first sentence. The purpose of the first sentence is to get the user to read the second sentence. — unknown

Copy converts. Never underestimate the importance of copy.

What are the industry tools?

Behance for portfolios

Wire-framing / prototyping

• Balsalmiq
• Axure
• invisionapp.com The git hub of designers. It lets you prototype designs, share and collaborate.

Recources:

Thenounproject – all the icons in the world for free font-awesome – awesome css library of svg symbols and icons google font API – free hosting of a TON of great fonts codepen.io – the premier playground for front end devs