Downloaded 17 times
Uploaded byMelissa Van De Werfhorst
Users First: UX Basics for Websites that Serve People (staff presentation at UCSB)
This presentation discusses user experience (UX) design, emphasizing the importance of understanding human interaction with the internet to create effective user experiences. It highlights the roles of various stakeholders including web designers and content creators, and the significance of audience research, user personas, and accessibility in UX design. Additionally, it covers strategies for improving websites, the use of wireframes, and content management for enhancing user engagement.
More Related Content
![UX is a Mindset [Tradecraft]](https://cdn.slidesharecdn.com/ss_thumbnails/uxmindset2014-01-08final-140106223343-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Users First: UX Basics for Websites that Serve People (staff presentation at UCSB)
Users First: UX Basics for Websites that Serve People (staff presentation at UCSB)
- 2. MelissaVan DeWerfhorst 893-4301 melissa@engineering.ucsb.edu @melissavandew Fairwarning: I tweet a lot aboutTV and books
- 3. THIS PRESENTATION: What isUX? Humans use the internet Concept to design
- 4. THIS PRESENTATION: What isUX? Humans use the internet Concept to design
- 5. WHAT IS USEREXPERIENCE?
- 6. WHAT IS USEREXPERIENCE? sometimes called UX Design Usability User Interaction User Interface Design These are parts of UX.
- 7.
- 9. USER EXPERIENCE HAPPY VISITORS DESIRED ACTIONS (this ismy ux philosophy)
- 10.
- 11.
- 12.
- 13. THESE ARE ALLPRETTY IMPORTANT. udemy.com
- 14. BUTTHIS IS MY FAVORITE UXPYRAMID
- 15. WHAT IS USEREXPERIENCE? http://www.slideshare.net/iKatDigital/e-business-world-2014-10-ux-myths-busted
- 17. WHO IS INVOLVEDWITHUX? Web designers Front-end developers UX/UI developers Content people Marketing people creative+tech+comm
- 18. WHO IS INVOLVEDWITHUX? You are.
- 19. WHY UX? Big companies= $$$ Conversion is their top priority Higher education = $ Enrollment and donations
- 20. WHY UX? UCSB = Serviceto students Engagement Student to alumni to donor Community building Brand and message You = ?
- 21.
- 22. Karlyn Borysenko –High EdWeb 2014 presentation http://www.zenworkplace.com/playingpolitics/
- 23. Karlyn Borysenko –High EdWeb 2014 presentation http://www.zenworkplace.com/playingpolitics/
- 27. THIS PRESENTATION: What isUX? Humans use the internet Concept to design
- 28.
- 29.
- 30.
- 31. HUMANS USETHE INTERNET Think aboutpeople before you sitemap or design or code or launch or redesign
- 32. HUMANS USETHE INTERNET Research! Identifyyour 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
- 33. HUMANS USETHE INTERNET ProjectStakeholders
- 34. HUMANS USETHE INTERNET ProjectStakeholders Their input works best when you collaborate on BUSINESS GOALS Defining brand and message Top priority behaviors Calls to action VIP audiences Results aka lead conversion
- 35. HUMANS USETHE INTERNET ProjectStakeholders Their input works best when you collaborate on BUSINESS GOALS And then include them at milestones such as Proposed website structure A completed mockup review Staged site review
- 36. Screencapped from RobinSmail’s excellent presentation: http://vimeo.com/112074750
- 37. Screencapped from RobinSmail’s excellent presentation: http://vimeo.com/112074750
- 38.
- 39. KNOWYOUR AUDIENCES Customer Journeys Figureout who your customers are by identifying key audiences. Maybe do some personas. Whatever works for you.
- 40.
- 41.
- 43.
- 44. User Persona (draft) forthe College of Engineering
- 45. KNOWYOUR AUDIENCES Not everyUCSB website is concerned with the student lifecycle. Knowing your business goals and key audiences will help you research and customize your user journeys.
- 46.
- 47.
- 48. ACCESSIBILITY STANDARDS UCSBWeb Standards- Accessibility http://www.ucsb.edu/webguide/web-accessibility Lynda.com Fundamentals of UX: Accessibility http://www.lynda.com/Web-Accessibility-tutorials/Foundations-UX- Accessibility/156957-2.html
- 49. THIS PRESENTATION: What isUX? Humans use the internet Concept to design
- 50. CONCEPTTO 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!
- 51.
- 52. IA BASICS: SITEMAP Draw.io Yoursite will have LOTS of landing pages Break pages down intoTiers andTemplates Structure is most helpful for your purposes
- 53. FUNCTIONALITY MAP Draw.io • Navigationwithin the hierarchy • Search • News fields displayed • Carousels! • CTA buttons • Content type • List of data type or editable content • Content manager needs
- 54. MOST PAGES =ENTRY PAGES
- 55.
- 56.
- 57.
- 58. WIREFRAMING It doesn’t haveto be fancy and it will save you some headache. http://www.slideshare.net/mightybytes/wireframing-basics-ux-and-the-design-process-by-amber-vasquez
- 59. WIREFRAMING Forces you tothink 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
- 60. MOCKUPS Everything changes whensomeone 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.
- 63.
- 64. UX DESIGN http://www.slideshare.net/iKatDigital/e-business-world-2014-10-ux-myths-busted Figure outpriorities Desired action + user needs Remove the friction
- 65. Recruitment of graduate students isobviously the priority here. Clear and unconfusing calls to action for each academic program https://education.ucsb.edu/aca demic-programs
- 66. Anything I wantto 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
- 67. UX DESIGN http://www.slideshare.net/iKatDigital/e-business-world-2014-10-ux-myths-busted Make timeto improve and redesign your websites Always go back to the user Bring together brain power
- 68. CONTENT MANAGEMENT Content Managersare users so UX of your site’s CMS is particularly relevant http://tpdsaa.tumblr.com/
- 69. CONTENT MANAGEMENT Site sustainabilitydepends on content Web governance Workflow Removing skill barriers Training
- 70. CONTENT DEVELOPMENT Show vs.TellRules 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
- 73.
- 74.
- 75.
- 76.