Nashville BarCamp :: October, 2014

UX: It's everywhere, it's everything. Learn the methods, undestand the steps, then make things.

Transcript

1. Overview of UX processes, methods, deliverables and concepts UX starts with strategy, proceeds through vision, takes shape through research, becomes real with personas, workflows and wireframes, and is validated and improved with usability testing. UX contributions work best when they’re baked in from the beginning: you can’t add them at the end. BarCamp Nashville :: October, 2014 :: @lauriekalmanson
2. Overview of UX processes, methods, deliverables and concepts BarCamp Nashville :: October, 2014 :: @lauriekalmanson User goals Business goals The happy place is where business goals match user goals Happy place
3. Overview of UX processes, methods, deliverables and concepts BarCamp Nashville :: October, 2014 :: @lauriekalmanson Product requirements Developer resources Scope Time Budget User research and discovery to create personas Workflows based on user types: Usability testing Interface sketch and interaction design Wireframes: Usability testing Mockups: Usability testing Prototype/Launch: Usability testing UX process Happy place Business process
4. Overview of UX processes, methods, deliverables and concepts BarCamp Nashville :: October, 2014 :: @lauriekalmanson The engineer thinks about the motor. The driver steps on the gas. How data works is not how the user experience works.
5. BarCamp Nashville :: October, 2014 :: @lauriekalmanson Research Personas Workflows Storyboards Content strategy Engagement architecture Information architecture Wireframes Interaction design Visual design Usability testing Mockups Prototypes Interviews, surveys, customer data Types of users you will build paths for Steps toward goals How those steps will work on the screen What the words will say; size, breadth, depth Social media: sharing, return visits, membership Categories, subcategories, topics, sorting Sketches that put these pieces together How it all goes; click, and then what happens? Look and feel Test early, test often: workflows through wireframes Layer visual design on tested wireframes Clickable, with real or fake interaction points User experience work, in order. Get these steps right to be successful
6. Workflows BarCamp Nashville :: October, 2014 :: @lauriekalmanson User goal Happy path for user type 2 Step Step Step Step Step Step Happy path for user type 1 Step Step Step Step Error path / Fail path
7. BarCamp Nashville :: October, 2014 :: @lauriekalmanson Storyboarding as a prelude to wireframing Step 1 Happy path for user type 1 Step 2 Step 3 Step 1 What happens on the screen Storyboard for happy path for user type 1 Step 2 What happens on the screen Step 3 What happens on the screen
8. Wireframes Wireframe Complex, detailed example with numbering for annotations to explain functionality and content strategy across sections BarCamp Nashville :: October, 2014 :: @lauriekalmanson Topics Clickthrus Pages
9. Sketches → Wireframes → Mockups → Prototypes BarCamp Nashville :: October, 2014 :: @lauriekalmanson
10. Overview of UX processes, methods, deliverables and concepts Review :: Tools and techniques What are the tools to use to know if business needs and user needs are in alignment, and users can accomplish their goals? BarCamp Nashville :: October, 2014 :: @lauriekalmanson Requirements :: Usability.gov http://www.usability.gov/how-to-and-tools/methods/requirements.html • Business Requirements: Alignment with the bottom line; define success in advance so you have metrics and markers. • User Requirements: Alignment with user needs and user success; user expectations, goals, needs and wishes • Creative Requirements: Branding, look and feel, voice, tone. • Functional Requirements: How it works; in partnership with development team.
11. Overview of UX processes, methods, deliverables and concepts Review :: Tools and techniques What are the tools to use to know if business needs and user needs are in alignment, and users can accomplish their goals? BarCamp Nashville :: October, 2014 :: @lauriekalmanson Personas :: Usability.gov http://www.usability.gov/how-to-and-tools/methods/personas.html • Express major needs and expectations of key users • Present expectations, needs, desires, goals • Describe real people: demographics • Research: Present users, future users
12. Overview of UX processes, methods, deliverables and concepts Review :: Tools and techniques What are the tools to use to know if business needs and user needs are in alignment, and users can accomplish their goals? BarCamp Nashville :: October, 2014 :: @lauriekalmanson Information Architecture :: Usability.gov http://www.usability.gov/what-and-why/information-architecture.html • Hierarchies, and structures: What are things called, and where do they go? Sweaters/knitwear? How many kinds of shoes/heels/sneakers/boots? • What is the common vocabulary of users, not the lingo of insiders? Clothing is apparel only to those in the business. • Card sorting exercises: Test the naming of things with users.
13. Overview of UX processes, methods, deliverables and concepts Review :: Tools and techniques What are the tools to use to know if business needs and user needs are in alignment, and users can accomplish their goals? BarCamp Nashville :: October, 2014 :: @lauriekalmanson Content strategy :: Usability.gov http://www.usability.gov/get-involved/blog/2013/11/creating-cross-channel-experiences.html • What does the content need to say, to which users, accomplishing what tasks? • What is the strategy across channels: web/mobile? • Who structures/categorizes/creates/edits/publishes content? • Content strategy includes help/documentation content.
14. Overview of UX processes, methods, deliverables and concepts Review :: Tools and techniques What are the tools to use to know if business needs and user needs are in alignment, and users can accomplish their goals? BarCamp Nashville :: October, 2014 :: @lauriekalmanson Wireframes :: Usability.gov http://www.usability.gov/how-to-and-tools/methods/wireframing.html Wireframes are a tool to prove out a concept, from sketching on a whiteboard or with paper and pencil to using tools like Omnigraffle or Visio. Showing users black and white concepts allow you to separate the beauty of a finished look and feel from the functionality of a user path. • Low-fidelity wireframes: Big concepts, main interactions, few details. “Does this make sense?” A starting point for proving out a concept with cross functional teams, and with users • High-fidelity wireframes: Further down the development cycle, when iterative rounds of concepts and testing are underway, add details and interactions, until you get to something that looks like a black and white version of a final product,
15. Overview of UX processes, methods, deliverables and concepts Review :: Tools and techniques What are the tools to use to know if business needs and user needs are in alignment, and users can accomplish their goals? BarCamp Nashville :: October, 2014 :: @lauriekalmanson User Interface (UI) :: Usability.gov http://www.usability.gov/what-and-why/user-interface-design.html The User Interface -- UI -- is the structure the user sees: the interactions, the buttons, menus, links, frames and sequences; in mobile, the complexity expands to include the motions, swipes, and taps. • Click, type or tap: Buttons, fields, checkboxes, radio buttons, drop down lists • Navigation: Categories, subcategories, breadcrumbs, pagination • Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows • Expand/Collapse: Accordions, tables, data grids
16. Overview of UX processes, methods, deliverables and concepts Workflow: Content Management (CMS) tool Numbered, with annotations BarCamp Nashville :: October, 2014 :: @lauriekalmanson • Write • Edit/Comment • Approve/ Publish
17. Overview of UX processes, methods, deliverables and concepts Sitemap: What can a user do on the site? BarCamp Nashville :: October, 2014 :: @lauriekalmanson
18. Overview of UX processes, methods, deliverables and concepts Usability test: Before, during, after BarCamp Nashville :: October, 2014 :: @lauriekalmanson
19. Overview of UX processes, methods, deliverables and concepts BarCamp Nashville :: October, 2014 :: @lauriekalmanson Usability test: Talking out loud :: thinking aloud
20. Overview of UX processes, methods, deliverables and concepts BarCamp Nashville :: October, 2014 :: @lauriekalmanson User Centered Design (UCD): Process flow :: Usability.gov http://www.usability.gov/how-to-and-tools/resources/ucd-map.html