What is User Experience (UX)?

It encompasses all aspects of a person’s attitudes, emotions and behavior when interacting with a product, service, system or interface.

• It is emotional - Feelings
• It is psychological - Behavior
• It is material - Environment
• It is experiential - Feelings + Behavior + Environment

User experience is a story!

UX is everywhere

• Street Signs
• Household Appliances
• Architecture
• Instructions
• Furniture
• Of course, website and applications
• And much more...

A good user experience is...

Useful - Does it solve a problem? Does it help someone achieve their goals?

Usable - Is it easy to use? Is it efficient? Is it practical?

Desirable - Simple, beautiful, elegant and inviting.

Findable - Are objects locatable? Can users find what they need?

Accessible - Is it handicap accessible? Is it designed for a diverse set of users?

Credible - Does it build trust? Will users believe what we tell them?

Valuable - Does it improve satisfaction?

[note: these are aspects of an interface, not an experience]

What is UX Design?

• When somebody makes the decisions about how the human and the product will interact.

• Good UX Design happens when we make these decisions in a way that understands and fulfills the needs of both our users and our business.

Roles

On a product development team, the UX Designer collaborates with:

• Stakeholders (clients or project owners)
• Strategists and Researchers
• Content Writers
• Visual Designers
• Developers

Information Architecture

• Structure related information
• Group content in a user-centric order
• Inform sitemap

Sitemap

A sitemap is a list or diagram which represents the hierarchical structure of the pages in a website or application

• Show hierarchy
• Group content
• Visualize path

Tech: robots.txt / sitemap.txt / sitemap.xml

#Navigation Designing

Design Principles

Design has rules. These rules are commonly referred to as design principles.

Design principles are a set of guidelines or high level instructions that guide or dictate design considerations. They can be universal or specific.

Universal Design Principles:

Applies to basic human behaviors and can be used for all kinds of designs. Example: Stop signs are always the same shape and color: red and octangular. But what if they were blue and rectangular?

Specific Design Principles:

Guidelines created for a specific project, brand or company to ensure a consistent design. Example: Google’s created 9 Principles for their Material Design UI that was rolled out across all Google platforms.

Wireframing

• Wireframes are the skeleton of a website.
• Similar to the blueprints of a house.
• The earliest part of the design phase. ## Rules:
• Always start with a pen and paper
• Get inspiration from similar products
• Incorporate best practices…. I.e. the “Home” button is almost always on the left

Exercise: Wireframe mycoolpetstore.com

• Groups of content using the card-sorting technique: Home, Careers, Cats, Food..
• Take your card groups and draw a sitemap. Note: Keep in mind visual hierarchy and...

• Using pen and paper, create a wireframe for the navigation bar....

• Always start with a pen and paper

UX Design Principles: Don Norman

Visibility – The more visible functions are, the more likely users will be able to know what to do next.

Feedback – Feedback is about sending back information about what action has been done and what has been accomplished, allowing the person to continue with the activity.

Constraints – The design concept of constraining refers to determining ways of restricting the kind of user interaction that can take place at a given moment. There are various ways this can be achieved.

Mapping – This refers to the relationship between controls and their effects in the world. Nearly all artifacts need some kind of mapping between controls and effects, whether it is a flashlight, car, power plant, or cockpit. * An example of a good mapping between control and effect is the up and down arrows on a computer keyboard used to represent the up and down movement of the cursor on the screen.

UX Design Principles: Don Norman (cont.)

Consistency – This refers to designing interfaces to have similar operations and use similar elements for achieving similar tasks. In particular, a consistent interface is one that follows rules, such as using the same operation to select all objects. For example, a consistent operation is using the same input action to highlight any graphical object at the interface, such as always clicking the left mouse button. Inconsistent interfaces, on the other hand, allow exceptions to a rule.

Affordance – is a term used to refer to an attribute of an object that allows people to know how to use it. For example, a mouse button invites pushing (in so doing acting clicking) by the way it is physically constrained in its plastic shell. At a very simple level, to afford means "to give a clue" (Norman, 1988). When the affordances of a physical object are perceptually obvious it is easy to know how to interact with it.

Jakob Nielsen’s - 10 Heuristics

1. Visibility of system status

2. The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

3. Match between system and the real world

4. The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

5. User control and freedom

6. Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

7. Consistency and standards

8. Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

9. Error prevention

10. Even better than good error messages is a careful design which prevents a problem from occurring in the first place Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Dieter Rams 10 Principles for Good Design