users first: ux basics for websites that serve people (staff presentation at ucsb)
TRANSCRIPT
Melissa Van De Werfhorst
893-4301 [email protected]
@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
THANKS & HAPPY HOLIDAYS