users first: ux basics for websites that serve people (staff presentation at ucsb)

Melissa Van De Werfhorst

893-4301 melissa@engineering.ucsb.edu

@melissavandewFair warning: I tweet a lot about TV and books

THIS PRESENTATION:

What is UX?

Humans use the internet

Concept to design

THIS PRESENTATION:

What is UX?

Humans use the internet

Concept to design

WHAT IS USER EXPERIENCE?

WHAT IS USER EXPERIENCE?

sometimes calledUX DesignUsability

User InteractionUser Interface DesignThese are parts of UX.

USER EXPERIENCE

USER EXPERIENCE

HAPPY VISITORS

DESIRED ACTIONS

(this is my ux philosophy)

THE HONEYCOMB OF UX

Thanks, usability.gov

USER EXPERIENCE

THESE ARE ALL PRETTY IMPORTANT.

udemy.com

BUT THIS IS MY FAVORITEUX PYRAMID

WHAT IS USER EXPERIENCE?

http://www.slideshare.net/iKatDigital/e-business-world-2014-10-ux-myths-busted

WHO IS INVOLVED WITH UX?

Web designersFront-end developers

UX/UI developersContent people

Marketing people

creative+tech+comm

WHO IS INVOLVED WITH UX?

You are.

WHY UX?

Big companies = $$$Conversion is their top priority

Higher education = $Enrollment and donations

WHY UX?

UCSB =Service to students

EngagementStudent to alumni to donor

Community buildingBrand and message

You = ?

- Darren Northcotthttp://www.uxbooth.com/articles/the-difference-between-ia-and-ux-design/

UX = BEHAVIORAL PSYCHOLOGY

Karlyn Borysenko – High Ed Web 2014 presentationhttp://www.zenworkplace.com/playingpolitics/

Karlyn Borysenko – High Ed Web 2014 presentationhttp://www.zenworkplace.com/playingpolitics/

THIS PRESENTATION:

What is UX?

Humans use the internet

Concept to design

HUMANS USE THE INTERNET

http://xkcd.com/773/

TheOatmeal.com

TheOatmeal.com

HUMANS USE THE INTERNET

Thinkabout people

before you sitemap

or design

or code

or launch

or redesign

HUMANS USE THE INTERNET

Research!

Identify your key audiences

Create realistic user personas

Outline behavior flowcharts

Ask people to do card sorting

Choose the research that makes sense for you and that you have time for

HUMANS USE THE INTERNET

Project Stakeholders

HUMANS USE THE INTERNET

Project StakeholdersTheir input works best when you collaborate on

BUSINESS GOALS

Defining brand and messageTop priority behaviors

Calls to actionVIP audiences

Results aka lead conversion

HUMANS USE THE INTERNET

Project StakeholdersTheir input works best when you collaborate on

BUSINESS GOALS

And then include them at milestonessuch as

Proposed website structureA completed mockup review

Staged site review

Screencapped from Robin Smail’s excellent presentation: http://vimeo.com/112074750

Screencapped from Robin Smail’s excellent presentation: http://vimeo.com/112074750

KNOW YOUR AUDIENCES

Customer Journeys

KNOW YOUR AUDIENCES

Customer Journeys

Figure out who your customers are by identifying key audiences.

Maybe do some personas. Whatever works for you.

THE STUDENT JOURNEY

http://www.oho.com/blog/prospective-undergraduate-student-journey

http://www.oho.com/blog/higher-education-

infographic-student-lifecycle

USER PERSONAS

User Persona (draft) for the College of Engineering

KNOW YOUR AUDIENCES

Not every UCSB website is concerned with the student lifecycle.

Knowing your business goals and key audiences will help you research and

customize your user journeys.

http://www.slideshare.net/whitneyhess/diy-ux-higher-ed

MULTI-SCREEN UX

ACCESSIBILITY STANDARDS

UCSB Web Standards - Accessibilityhttp://www.ucsb.edu/webguide/web-accessibility

Lynda.comFundamentals of UX: Accessibility

http://www.lynda.com/Web-Accessibility-tutorials/Foundations-UX-Accessibility/156957-2.html

THIS PRESENTATION:

What is UX?

Humans use the internet

Concept to design

CONCEPT TO DESIGN

Information Architecture (IA)

Use your audience research to build a sitemap of pages and functionality

Hint: this also helps with scope of work for your dev team!

IA BASICS: SITEMAP

Draw.io

IA BASICS: SITEMAP

Draw.io

Your site will have LOTS of landing pages

Break pages down into Tiers and Templates

Structure is most helpful for your purposes

FUNCTIONALITY MAP

Draw.io

• Navigation within the hierarchy• Search• News fields displayed• Carousels!• CTA buttons• Content type• List of data type or editable

content• Content manager needs

MOST PAGES = ENTRY PAGES

http://www.coe.neu.edu/faculty-research/initiatives

http://www.coe.neu.edu/academics/undergraduate-studies

WIREFRAMING

WIREFRAMINGIt doesn’t have to be fancy and it will save you some headache.

http://www.slideshare.net/mightybytes/wireframing-basics-ux-and-the-design-process-by-amber-vasquez

WIREFRAMINGForces you to think about the UX

Makes it easier to dive into design

Get the client to sign-off on a wireframe

Developers could get started early

TOOLS

InDesign, Photoshop

Balsamiq, UXPin, etc.

Pen & paper

MOCKUPS

Everything changes when someone sees colors and blocks instead of words and

concepts.

This steps helps the client aka stakeholder tell you what they want.

But it also helps you visualize your user’s behaviors.

UX DESIGN

http://www.slideshare.net/iKatDigital/e-business-world-2014-10-ux-myths-busted

UX DESIGN

http://www.slideshare.net/iKatDigital/e-business-world-2014-10-ux-myths-busted

Figure out priorities

Desired action + user needs

Remove the friction

Recruitment of graduate students is obviously the priority here.

Clear and unconfusing calls to action for each academic program

https://education.ucsb.edu/academic-programs

Anything I want to know is here. This site is about me, the visitor.

The CTAs are big red buttons that are easy to find.

Thanks:http://clients.mstoner.com/hew/get_with_the_program.pdf

UX DESIGN

http://www.slideshare.net/iKatDigital/e-business-world-2014-10-ux-myths-busted

Make time to improve and redesign your websites

Always go back to the user

Bring together brain power

CONTENT MANAGEMENTContent Managers are users so UX of

your site’s CMS is particularly relevant

http://tpdsaa.tumblr.com/

CONTENT MANAGEMENT

Site sustainability depends on content

Web governanceWorkflow

Removing skill barriersTraining

CONTENT DEVELOPMENT

Show vs. Tell Rules

Copywriting for quick relaying of information

Use graphics or images instead of words when possible

Video use should be strategic and add value, tailored to the audience

http://hugeinc.com/ideas/perspective/everybody-scrolls

VALUABLE STUFF NOT COVERED TODAY

BrandingDevelopment

Usability TestingA/B Testing

Surveys

MOCKUPS

Melissa Van De Werfhorst(805) 893-4301

melissa@engineering.ucsb.edu

THANKS & HAPPY HOLIDAYS