Intro to User Centered Design Workshop

Interactive Design What you need to know to be an effective web designer

We are particular about type My favorite font!

Stretched type is not fun A kitten dies every time this happens – but it’s still not ok

What’s wrong here? Sounds…awkward?

Interactive designers are no different

Buttons vs links Good: Bad: Sample debate: http://www.ixda.org/node/15621

Should designers learn to code? 011110010110010101110011

It’s not crazy… it’s passion

Are you this enthusiastic about interactive design?

Hello, I’m Patrick And I have an obsession with the web

Get in touch: mcneilp@gmail.com or @designmeltdown or pmcneil.com

Today's agenda 1. The User-Centered Design Process (2 hrs) 2. Core technologies of the web (15 min) 3. Hot topics & trends (30 min)

Got links? PDF download at the end

Part 1: The User-Centered Design Process

Backgrounds The background of UX professionals

Your backgrounds From the pre-conference survey

You’re already an interactive designer You just need some new tools & a fresh perspective

User-centered design (UCD) is a design philosophy that puts the user of a product, application, or experience, at the center of the design process.

UCD Process overview UCD is a state of mind & it is not a one man show Start here… define deploy concept users develop design

UCD Step 1: Defining the project define deploy develop users concept design

Define the scale • Replacement or brand new product • Update to an existing product

Define basic requirements • What should it do (features, functionality, what it does etc)? • How will we measure our success? • Incremental changes in revenue (direct or indirect), customer leads or other activity • What are the environmental factors (physical & technical)? • Who is the user (demographics, skill level, frequency of use & physical)?

Generate documentation • Write personas – A rich description of typical users • http://uxmag.com/articles/personas-the-foundation-of-a-great-user-experience • Write use case scenarios – Written descriptions of how a product will be used describing common scenarios • http://www.gatherspace.com/static/use_case_example.html

Generate documentation • Activity diagrams – Flowcharts showing how a process will work Source: http://www.edmullen.com/work/project/free-people-retail & http://ils.indiana.edu/faculty/smilojev/teaching/s515spring2012/2012springprojects/session11/

Generate documentation Site maps – defines the sites content and information architecture Information Architecture (IA) is an entire field of work Awesome resource: http://iainstitute.org/en/learn/ Source: http://ils.indiana.edu/faculty/smilojev/teaching/s515spring2012/2012springprojects/session11/

Methods for gathering data • Interviews (great for exploring ideas) (requirements) • Questionnaires / surveys (a great preliminary tool) (requirements) • Focus groups (basically group interviews) (requirements) • Direct observation (observe users completing a task) (flowchart) • Card sorts (to discover how users view the content) (sitemaps)

As a result we have: • A clear description of the project • Specific, and measurable goals • A detailed understanding of the user • Vision for how the product will be used • Best of all, tangible assets the team can share

Building requirements Start here… Define Requirements Gather users Interpret Analyze

Tools of the trade • For charting (flowcharts etc): • Visio (PC) ($300) • OmniGraffle (MAC) ($99) • Axure (PC & MAC) ($289) (free to educators) • Card sorting • Online tool: OptimalSort ($109/month) • Free software (both free): • PC: UXSort • MAC: xSort • Survey tools • Survey Monkey (free, $17+) • Wufoo (free and up) • Google Docs (FREE!)

Learn more If you would like to learn more about this phase: Learn to make: • Personas • Concept models • Site maps • Flowcharts • Wireframes • Design Briefs • Usability plans • Usability reports

UCD boils down to seeking meaningful design insights over random acts of design

Our product: A new tool to help holiday shoppers stay organized, find gift ideas & score the best deals

Steps: 1) 2) 3) 4) Reflect Ask questions Answer questions Reflect Time box 5 minutes per step organized, gift ideas & deals

My results: 1) The list repeats itself every year 2) Zero carry over year to year 3) Thoughtfulness over price tag

UCD isn’t so complex and you didn’t even need to know HTML

UCD Step 2: Create concepts define deploy develop users concept design

Developing concepts includes • Interpret the documentation to develop possible solutions • Shift from listening to problem solving • Build wireframes • Create prototypes • User testing • This stage is much more iterative (or at least it should be)

Wireframes A schematic or blueprint that represents the structure of a website. Wireframes are nonfunctional, static image. Start with low-fidelity. Less detail and quick to produce. Move towards higher fidelity as you shape and improve it. Work from the documentation project requirements and research from step 1!

Elements of Wireframes Wireframes address three core elements 1) Information design – the placement and prioritization of the layout. Very inline with graphic design. 2) Navigation design – the location and structure of the navigation systems. 3) Interface design – expose the features that the app offers. What does it do? How does the structure expose this to users?

Wireframing tools Many people also frequently use the following to wireframe: InDesign, PowerPoint, Keynote, Visio & HTML

Wireframing tools http://blokkfont.com/ http://www.wirify.com/

Paper wireframing http://www.uistencils.com/

Prototypes Creating the illusion of functionality They don’t need to be complete and typically only simulate a small set of features in an interface Allows you to test out how an interface flows from screen to screen

Tools for prototyping Many people also frequently use the following to prototype: InDesign, PowerPoint, Keynote, Visio & HTML

Demo PDF prototype Demo Axure prototype

Specialized tools https://fluidui.com/ (Is it a wireframe or a prototype? )

Lean on your user insights and work magic Beautiful, unicorn magic

User testing Great, so how do we actually test this stuff?

User testing tools Guerrilla testing is the place to start (and end): http://silverbackapp.com/

Iterations are the key Wireframe something Discover something Test with a prototype

Cost to change/fix 1x cost to change during requirements / design 5x cost to change during development 25x cost to change during formal testing 100x cost to change in production You can’t afford not to do it. Researchers at Hewlett-Packard, IBM, Hughes Aircraft, TRW, and other organizations have found that purging an error by the beginning of construction allows rework to be done 10 to 100 times less expensively than when it’s done in the last part of the process, during system test or after release. (Fagan 1976; Humphrey, Snyder, and Willis 1991; Leffingwell 1997; Willis et al. 1998; Grady 1999; Shull et al. 2002; Boehm and Turner 2004).

Results: A set of wireframes and prototypes packed with meaningful design decisions.

Video time Usability test with a paper prototype Source: http://www.youtube.com/watch?v=9wQkLthhHKA

Observations • It takes practice • Focus on the user experience of the app and not anything technical or secondary – it is about the essence of the app • Paper prototype allows for you to accommodate unexpected things • Record the session! • You could quickly change it and test with a new subject • He isn’t trying to get her to do what he wants and prove his design is right – genuine interest in improving

UCD Step 3: Design visual solutions define deploy develop concept users design

Finally, Design the interface using the blueprints

Wireframes, So much more than a suggestion

Sample wireframe http://newsignature.com/blog/2011/08/06/a-quick-introduction-to-wireframing/#.UnD57PnXRvB

UI Design tools http://www.adobe.com/products/photoshop.html http://html.adobe.com/edge/reflow/

UI Design tools http://macaw.co/ http://www.bohemiancoding.com/sketch/

More testing! Test the interface using the same tools

User testing tools User observation

UCD Step 4: Development define deploy concept users develop design

This is when all that Documentation can really pay off

You do not get to Toss it over the fence and forget about it

UCD Step 5: Deploy into the wild define deploy develop concept users design

Still testing, but it looks a little different: Monitor and look for helpful insights

Google Analytics http://www.google.com/analytics/ Who What When From Events Goals Conversions And much more

Optimizely https://www.optimizely.com/

Crazy Egg http://www.crazyegg.com/

Inspectlet http://www.inspectlet.com/

Ideas and insights from here become The definition of the next project

User Centered Design define UX Designers & Information Architects SEO and web optimization folks deploy concept users Interaction Designers (IxD) develop design Front end dev’s & programmers UI Designers

x x Did you notice something missing?

Sources Books referenced in this presentation & others I recommend:

Learning code The books to get for a foundation in HTML, CSS and JavaScript

Break time Take 10 minutes… Come back for some free books

Thank you for completing the survey!

Part 2: Core technologies of the web A high level overview in 15 minutes or less

Trend 1: Skeumorphic vs flat design The battle rages on…

The original debate Contributors: - MS Metro UI + iOS7 + Android - Responsive design - Greater focus on Type Source: http://sachagreif.com/flat-pixels/

Less generic flat design Note the reduced focus on flat – and increased focus on overall style

Web skeuomorphs They tend towards painful…and often feel very 2004 What not to do: http://skeu.it

So what is, the opposite of flat design?

Trend 2: Mobile first Mobile design influencing desktop design

Trend 3: Story telling Creating stories instead of brochures

Trend 4: Atmosphere Setting a tone through style

Via thematic design A nice side effect of flat design – thematic design feels even more distinct.

Trends from the future Trendy fortune telling…satisfaction guaranteed…for 24 hours

Gestures Another step in the mobile evolution

Gestures Cool resource: http://static.lukew.com/TouchGestureCards.pdf

Video More video integration – video will be the new parallax

Finally, A few random predictions That may, or may not hold true

Flat Design will fade in popularity as yet another trend. It’s downfall being its generic nature. Don’t get me wrong – these sites are delicious.

The desktop is truly going to become a secondary platform – it will be the afterthought mobile was 5 years ago.

Today's trends are the retro trends of the future! We are just ahead of our time.

Get a PDF of this presentation: pmcneil.com Get in touch: mcneilp@gmail.com or @designmeltdown or pmcneil.com

Intro to User Centered Design Workshop

More Related Content

What's hot

Viewers also liked

Similar to Intro to User Centered Design Workshop

Recently uploaded

Intro to User Centered Design Workshop