User Experience Training

by Nando

What is UX?

In terms of website design, UX involves enhancing a user’s experience and interaction with a website or app. Among other things, this can include:

● ease of use● user flow● how intuitive navigation is● overall functionality● meeting user’s expectations

What is UX?UX can involve:

● Stakeholder interviewso Website users, organization

supporters, staff, etc.● User testing● User-centered Design (UCD)

o Designing with users’ needs in mind● Visual deliverables

o Data maps, workflows, user flows, sitemaps, and wireframes

Why UX matters

Here are a few reasons why UX is important:

● User experience can set a company or brand or product apart from otherso When there is little to differentiate one product from another,

good UX can be that difference● Selling an experience vs. selling a product

o UX shifts the focus from delivering a great product to delivering a great experience

● It’s smarto Spend more time planning and less time fixing

Why learn UX

Why everyone should learn (or at least be familiar with) UX:

● Everyone ends up doing a bit of it--all of us have all already done some UX

● It’s a step-by-step processo Research > Analysis >

Design● It isn’t hard to learn

Design and Development Process

UX is one of the first steps in the design and development process:

Discovery > UX > UI > Design > BE/FE > QA

Design and Development Process

UX work should start 2-6 weeks before development depending on approach:

● Waterfall workflowo Next stage of development does not begin until previous one

has been completed● Agile workflow

o Different stages of design and development process happen simultaneously and inform each other

Understanding Users and UCD

It’s important to understand the people who will be using the technology we develop. This is the aim of User- Centered Design, or designing and developing with users’ needs in mind. UCD can include:

● Surveys and Interviews● Qualitative and quantitative data--such as analytics● Word maps, Concept maps, User Flows, Personas● Contextual inquiry--observing someone use the website

UCD -- Concept Maps

Concept Maps depict suggested relationships between concepts. They are a useful brainstorming tool during the early stages of a project that helps organize thoughts and ideas in a visual way.

UCD -- 5 W’s + H of Users

● Who are our users?● What are their habits?● Where are they accessing from?● When are they visiting our website or app?● How are they accessing?● Why are they made (Personas)?

UCD -- Personas

Personas are hypothetical users made from emerging themes found in the research phase. For example:

● 20 year-old college student (who?)● Texting, Snapchat, Instagram (what habits?)● School and home (where are they accessing from?)● Evenings (when are they visiting our website?)● Phone (how are they accessing?)

UCD -- User Flows

User flows illustrate the way a user navigates a website. They are particularly useful as they give an idea of the various decisions and options a user will encounter while navigating the site.

UCD -- Sitemaps

Sitemaps are hierarchical diagrams of the pages on a website. They lay out the general structure and organization of the site, and are useful for designers as well as developers.

UCD -- Wireframes

Wireframes are visual representations of the pages of a website. Before the design stage, wireframes allow to focus attention on content placement and strategy. They are a rough sketch of what each page will look like.

Conclusion

● UX is an important part of the design and development process

● We are all already doing some UX

● Ideally it saves time and money

● Helps create a product with the user in mind

Attributions“touch-screen” by Yamini Ahluwalia from the Noun Project

“clipboard” by Creative Stall from the Noun Project

University College London, User-Centered Design, http://blogs.ucl.ac.uk/ele/files/2012/09/BBA2_Fig5-1_UCD_wiki.png

The Oatmeal, What I Want from a Restaurant Website, http://theoatmeal.com/comics/restaurant_website

Yale Instructional Technology Group, Concept Map, http://itg.yale.edu/files/2014/02/conceptMap_processed.jpg

Yalantis, User Flow, https://yalantis.com/media/content/ckeditor/2014/10/4-user-flow.png

General Assembly PowerPoint, Wireframe