crash course in ux - internet week ny 2015

71
Crash Course in UX Define your mission, better understand your audiences, craft your story, create and organize your content, explore key design principles and understand the functional interactions to create engaging, modern and satisfying digital user experiences. Is that all?! Photo by Ron Cogswell, Flickr

Upload: sblecher

Post on 13-Aug-2015

311 views

Category:

Internet


1 download

TRANSCRIPT

Crash Course in UX

Define your mission, better understand your audiences, craft your story, create and organize your content, explore key design principles and understand the functional interactions to create engaging, modern and satisfying digital user experiences. Is that all?!

Photo by Ron Cogswell, Flickr

DP

Hi, I’m Sarah…

Director of User Experience

Digital Pulp

@sblecher [email protected] https://www.linkedin.com/in/sblecher

DP

First some questions…

DP

What is UX?

DP

What is UX?

It’s the moment when content, design, and interaction come together and

how the user feels about it.

DP

Content + Design + Interaction

CORE ELEMENTS

DP

WHAT ARE THE STEPS?

Define Your Goals

Understand Your Users

Create Your Content

Organize Your Content

Craft the Experience

Test the Experience

Visual Design

Interactions & Technology

DP

Define Your Goals

DP

EXAMPLE GOALS

• Communicate who you are and what you do in a compelling way online

• Support users during the evaluation phase with things they didn’t know to ask for

• Continually drive users to the next action (find a campus, ask their questions and sign up for a tour)

DP

Understand Your User

DP

“The more you know. The more ideas you’ll have.”

- Sarah Blecher, Digital Pulp

Photo by Mr Moss, Flickr

DP

Who are they? How do they see the world? What motivates them? What are they trying to accomplish? What

do they need from you?

GAINING KNOWLEDGE

DP

CREATING PERSONAS

http://www.ux-lady.com/diy-user-personas/

DP

CREATING PERSONAS

Aspiring Parents (Children 0-2)

They may or may not have the child in daycare but they are just starting to think about school for their child. They wonder about their options and when is the right time to start thinking about and researching schools.

DP

CREATING PERSONAS

Experienced Parents (Children 6-13)

These parents know what they want. They are dissatisfied with their previous school or have recently moved. They are interested in teaching philosophies, curriculum, class size, discipline, test scores, all the details. Friendships influence their decision.

DP

TIPS FOR PERSONAS

• Go beyond demographics to what motivates the person (lack of time, lack of knowledge, lack of resources, family history or situation, world view, immediate needs)

• A good persona is not long. It simply includes things that will impact your content, design and interaction choices.

• Prioritize your personas. Too many and you can’t use them to make decisions.

DP

A customer journey map tells the story of the customer’s

experience from initial awareness, through the process of engagement

and into a long-term relationship.

CUSTOMER JOURNEY MAP

DP

http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2014/12/1-broadband-provider-journey-large-opt.jpg

DP

http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2014/12/1-broadband-provider-journey-large-opt.jpg

DP

Establish a rental budget

Determine neighborhoods & desired amenities

Start the rental search

Talk to an agent

Tour apartments & adjust expectations

Fill out rental application & pay fee

Customer Journey Map for CitiHabitats

Persona Goal

Missy McAndrews, Renter, 20s Rent her first apartment in New York City

Customer Needs & Activities

• Find out about average costs• Discuss with Family• Discuss with Friends

• Review online neighborhood guides• Create a list of things that are desired (outdoor space, view, walking distance to gym, etc)

• Search on aggregate sites like street easy• Search local real estate agency sites• Adjust expectations• Find a series of acceptable apartments

• Contact the agent associated with one of the desired listings• Discuss desires• Setup a time to see the apartment

Emotional State of Persona

HAPPY

SAD

Expectations of Real Estate Agent / Agency

• None • None • Make it easy to search for apartments• List only apartments that are available• Explain the apartment features location and amenities• Save searches

• Alter key apartment criteria (increase search area, increase budget, etc)

• Meet up with agent to sign paper work.• Read through the rental agreement and ask any questions.• Sign the Lease• Set a move in date• Accept the keys• Move in

• Make it easy to contact an agent• Ensure someone responds to the inquiry quickly• Quickly schedule a showing• Suggest alternative apartments or neighborhoods• Give helpful guidance on saving money or finding the right apartment

• Arrive at the scheduled time• Have access to the apartment• Talk through the benefits of the apartment and the costs.

• Explain the rental process• Arrive with the paperwork• Ensure the signed agreement gets returned• Ensure keys are handed over on move-in day.

Stages of Journey

Thu May 14 2015

DP

Establish a rental budget

Determine neighborhoods & desired amenities

Start the rental search

Talk to an agent

Tour apartments & adjust expectations

Fill out rental application & pay fee

Customer Journey Map for CitiHabitats

Persona Goal

Missy McAndrews, Renter, 20s Rent her first apartment in New York City

Customer Needs & Activities

• Find out about average costs• Discuss with Family• Discuss with Friends

• Review online neighborhood guides• Create a list of things that are desired (outdoor space, view, walking distance to gym, etc)

• Search on aggregate sites like street easy• Search local real estate agency sites• Adjust expectations• Find a series of acceptable apartments

• Contact the agent associated with one of the desired listings• Discuss desires• Setup a time to see the apartment

Emotional State of Persona

HAPPY

SAD

Expectations of Real Estate Agent / Agency

• None • None • Make it easy to search for apartments• List only apartments that are available• Explain the apartment features location and amenities• Save searches

• Alter key apartment criteria (increase search area, increase budget, etc)

• Meet up with agent to sign paper work.• Read through the rental agreement and ask any questions.• Sign the Lease• Set a move in date• Accept the keys• Move in

• Make it easy to contact an agent• Ensure someone responds to the inquiry quickly• Quickly schedule a showing• Suggest alternative apartments or neighborhoods• Give helpful guidance on saving money or finding the right apartment

• Arrive at the scheduled time• Have access to the apartment• Talk through the benefits of the apartment and the costs.

• Explain the rental process• Arrive with the paperwork• Ensure the signed agreement gets returned• Ensure keys are handed over on move-in day.

Stages of Journey

Thu May 14 2015

DP

CUSTOMER JOURNEY MAP TIPS

• Create your journey map with the client or co-workers. More perspectives = better.

• Focus on all stages of the user’s experience and list out what your users need to make a decision or move forward.

• Capture any ideas for your organization of what you could provide your users along the way – especially in moments of stress.

DP

Creating the Content

DP

Content is the reason search began in the first place.

~ Lee Odden, TopRank MarketingPhoto by Miguel Virkkunen Carvalho

DP

What are the key messages or themes? What do you want to

say about who you are and what you do?

KNOW YOUR STORY

DP

ASSESS EXISTING CONTENTPACE UNIVERSITY - Existing Site Content

Level 1 Level 2 Level 3 Level 4 Level 5 Level 6 Level 7 URL TYPE OF CONTENT CATEGORY / TOPIC TARGET AUDIENCE OBSERVATIONS/RECOMMENDATIONS

CORE CONTENTHomepage http://www.pace.edu/ feature page undergraduate

Academics http://www.pace.edu/honors-college/ listing page graduate studentsUndergraduate http://www.pace.edu/honors-college/ article page executive education faculty

Majors & Minors http://www.pace.edu/honors-college/ video international staff great content!Detail Page http://www.pace.edu/honors-college/ audio about the school everyoneCombined degrees (goes here) http://www.pace.edu/honors-college/ slideshow undergraduate

Programs http://www.pace.edu/honors-college/ search tool graduate press links to 3rd party siteHonors College http://www.pace.edu/honors-college/ interactive tool executive educationDegree Completion http://www.pace.edu/honors-college/ feature page international

Business Studies, BBA http://www.pace.edu/honors-college/ listing page about the school students embedded toolNursing, BS http://www.pace.edu/honors-college/ article page undergraduate facultyProf, Communication Studies, BS http://www.pace.edu/honors-college/ video graduate staffProf. Technology, BS http://www.pace.edu/honors-college/ audio executive education everyone

Online Learning http://www.pace.edu/honors-college/ slideshow international out of dateIs Online Learning for You? http://www.pace.edu/honors-college/ search tool about the school press out of dateOpen Houses & Information Sessionshttp://www.pace.edu/honors-college/ interactive tool undergraduate out of dateHow You'll Take Courses http://www.pace.edu/honors-college/ feature page graduateApplication Process http://www.pace.edu/honors-college/ listing page executive educationTuition & Fees http://www.pace.edu/honors-college/ article page internationalFAQs http://www.pace.edu/honors-college/ video about the school students too long

Summer Programs http://www.pace.edu/honors-college/ audio undergraduate faculty only one sentenceSummer Class Schedule http://www.pace.edu/honors-college/ slideshow graduate staffSummer Tuition & Financial Aid http://www.pace.edu/honors-college/ search tool executive education everyoneSummer Housing http://www.pace.edu/honors-college/ interactive tool internationalApplication Process http://www.pace.edu/honors-college/ feature page about the school pressAfter You Register http://www.pace.edu/honors-college/ listing page undergraduate not helpfulFAQs http://www.pace.edu/honors-college/ article page graduate

Winter Intersession http://www.pace.edu/honors-college/ video executive educationWinter Class Schedule http://www.pace.edu/honors-college/ audio international studentsWinter Tuition & Financial Aid http://www.pace.edu/honors-college/ slideshow about the school facultyWinter Housing http://www.pace.edu/honors-college/ search tool undergraduate staffApplication Process http://www.pace.edu/honors-college/ interactive tool graduate everyoneAfter You Register http://www.pace.edu/honors-college/ feature page executive educationFAQs http://www.pace.edu/honors-college/ listing page international press

Bridge Programs http://www.pace.edu/honors-college/ article page about the schoolfor High School Students http://www.pace.edu/honors-college/ video undergraduatefor International Students http://www.pace.edu/honors-college/ audio graduate students

CAP Program http://www.pace.edu/honors-college/ slideshow executive education facultyAcademic Support http://www.pace.edu/honors-college/ search tool international staff

First Year Academics http://www.pace.edu/honors-college/ interactive tool about the school everyoneAcademic Advising http://www.pace.edu/honors-college/ feature page undergraduateTutoring Center http://www.pace.edu/honors-college/ listing page graduate pressWriting Center http://www.pace.edu/honors-college/ article page executive education facultyCenter for Academic Excellence http://www.pace.edu/honors-college/ video international staffLibraries http://www.pace.edu/honors-college/ audio about the school everyoneComputer Labs http://www.pace.edu/honors-college/ slideshow

Career Services http://www.pace.edu/honors-college/ search tool pressStudy Abroad http://www.pace.edu/honors-college/ interactive tool

more? http://www.pace.edu/honors-college/ feature page goes deeper in this sectionResearch at Pace http://www.pace.edu/honors-college/ listing page

Grants & Topics http://www.pace.edu/honors-college/ article pageEnrichment Seminars http://www.pace.edu/honors-college/ video

Content Audit and Analysis: • Hierarchy • Page Title & URL • Type or Format

• Category or Topic • Target Audience • Observations or Recommendations

DP

GENERATE NEW CONTENT

Consider the top 5 questions a user

has on their mind as they come to the site.

Look at your customer journey map to determine what content users

need

See what competitors and

peers are saying and doing

Look outside your industry for inspiration of tone and format!

DP

CONSIDER VOLUME, TONE & FORMAT

• Volume of content (how much will you have initially & over time)

• Tone of content (authoritative, conversational, etc)

• Format of the content (blog, infographic, video, text, photos, etc)

• Create samples and test them!

DP

CONTENT TIPS

• If the content you want exists already online, consider publishing it anyway. Like a song that’s been covered a million times, people want to hear your interpretation.

• Avoid syndicated or obligatory content - glossaries, etc. It’s typically poor quality, doesn’t help with search results or reputation and users can tell it’s not yours so you don’t get much credit.

DP

Organizing the Content

DP

Photo by David Lofink, Flickr

“Say what you will about the Ten Commandments, you must always come back to the pleasant fact that there are only ten of them.”

DP

Sitemaps + Flowcharts + Wireframes

INFORMATION ARCHITECTURE

DP

Photo by Juhan Sonin, Flickr

ORGANIZING • Card sorting is a typical approach.• It is done by writing content ideas on

individual sticky notes and placing those notes in logic groups.

• If the site is too large, sort on your own in excel and use a service like TreeJack to test it with users later.

DP

MBA Program

Innovation & Entrepreneurship

Global Opportunities

Academics & Faculty

Power of the Case Method

Global Business Experiences i.Lab Incubator

Competitions

Courses & Concentrations

Clubs & Conferences

Student Videos

Learning Teams

Advance Your Career

Top Hiring Companies

Salary &Earnings

Employment by Industry

Counseling & Support

Employment by Location

On-on-One Counseling

Recruiting Workshops & Preparation

On-Grounds Recruiting

Off-Grounds Recruiting

Career Conferences

Career Advisors

Alumni Network

Class Profile & Community

Class Profile

Why I Chose Darden

Career Switchers

What SurprisedMe The Most

What I Plan ToDo Next

Student Clubs

Experiential Learning Opportunities

Contact a Student

A Diverse MBA Community

Global Field Experiences Students Speak

Section

Videos

Consulting Projects

Leadership

Entrepreneurship

Finance

Operations

Internships

Unique Courses

Curriculum

Dual Degrees

Student Videos

Exchange Programs

Batten Institute

International Students

Women

Military

LGBT

Partners and Families

Life at Darden

Student Blogs

Mission-Drive Careers

For International Students

Electives

Core Business Curriculum

Concentrations

Faculty

Electives include: Accounting, Consulting, Entrepreneurship, Innovation, and Strategy, Ethics, Finance, Global Economies and Markets, Leadership and Organizational Behavior, Management Communications, Marketing, Operations, Quantitative Analysis, Sustainability, Specialty Areas

Dual Degrees include: MBA/JD, MBA/MD, MBA/MPH, MBA/MPP, MBA/MEd in Innovation in Education Reform, MBA/MA in East Asian Studies, MBA/MA in Government or Foreign Affairs, MBA/ME, MBA/MSN, MBA/PhD

Costs & Financial Aid

Tuition &Expenses

Scholarships

Loan Programs

Applying for Financial Aid

Admissions

Apply

Requirements

Schedule a Conversation

Deadlines

Veterans Benefits

Important Dates

Events & Receptions

ExecutiveMBA Blog

Visiting Darden

Request Information

Visit Darden

Attend an Event

Compare MBA Formats

Contact Students& Alumni

Apply Now

Confirmation

FAQs

Social Links

Online Viewbook

Connectwith Us

SITEMAPS

DP

FLOWCHART

Photo by Paul Gallo / CC BY

DP

INFORMATION ARCHITECTURE TIPS

• Group similar things together

• Remember the magic rule of 7

• Clarity over creativity in navigation

• Try to avoid going more than 3 levels deep (or breadcrumb it is!)

• Try to avoid a lopsided sitemap where it’s deep in one area and shallow in another (adds navigation patterns)

DP

INFORMATION ARCHITECTURE TIPS

• Less clicks are not as important – confident clicks are better.

• You may think your structure is perfect but just wait! After spending hours on your beautifully organized hierarchy the wireframe exercise will change things.

• More ideas: http://www.goodui.org/

• Or read: How to Make Sense of Any Mess by Abby Covert

DP

Crafting the Experience

DP

A visual guide that gives a framework for your website. A blueprint or page schematic that is created to layout site elements in the best way possible to support a specific purpose.

WHAT IS A WIREFRAME?

DP

DP

DP

DP

BENEFITS of WIREFRAMING

• Gives you a sense of the user experience

• Hints at the content and how it might come together

• Non-technical people can see and comment on the direction

• Technical people can start to think about how it will be built and managed

• WIREFRAME IS NOT A DESIGN!

DP

WIREFRAME TIPS

• Start with a pattern library… http://ui-patterns.com/ or http://pttrns.com/

• Beware of using ‘Lorem ipsum’. It allows wireframes to get approved, go through design and coded before anyone realizes it won’t work.

• Make it clean and pretty. Messy wireframes are hard to react to.

• Sometimes you don’t want to do a wireframe (what?!?!). For some marketing sites a wireframe just inhibits the designers creativity. Start with the content and go straight to design from there.

DP

TOOLS FOR CREATING SITEMAPS, FLOWCHARTS & WIREFRAMES

• http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302

DP

Testing the Experience

DP

TYPES OF USER TESTING

• Web Analytics • Click & Eye Tracking • A/B Testing

UNDERSTAND YOUR USERS ORGANIZING THE CONTENT

LIVE SITE

CRAFTING THE EXPERIENCE

• Stakeholder Interviews • Focus Groups • Surveys

• Card Sorting • Tree Testing

• Usability Testing

DP

WHEN TO TEST?

• Decide whether you’re going to do formal or informal user testing. Formal testing can be done by a company, freelance expert, or online service like usertesting.com

• Approved wireframes is a great moment to start testing the experience

• If you have an application, testing with a working prototype is better

• If you have a marketing site, wait until you have designs before testing

DP

DIY TESTING RECIPE

1. Find 8 people that can commit to 1 hour of time. Session should last 45 minutes to allow time in between participants.

2. Create a script covering the most important questions your users will have when coming to the site.

3. Output your wireframes as PNGs that allow a user to find answers to their top questions. Upload the PNGs to Invision (or similar service) and interlink the screens so they feel interactive.

4. Setup a computer with internet in a private room. Have a sign, water and a few snacks outside the door in case the next user comes early.

5. Start by letting the participant know there are no wrong answers and you just want to know what they think. That they can’t hurt your feelings. Be as dispassionate as possible. Tell them you are going to ask them to find things on the site. You want them to narrate out loud where they would go.

6. When testing the navigation labels, ask what the person expects to find under each section. Only then have them click. Then ask them to tell you what they think now that they see what’s inside the section.

DP

• Google Analytics is a great free

platform. • Easy to setup • Great for benchmarking,

conversion and marketing • But it can’t tell you how people are

feeling or why people are avoiding

certain sections of the site.

SITE USAGE & ANALYTICS

DP

CLICK TRACKING

• CrazyEgg is an inexpensive platform

starting at $9/month. • Easy to setup – Simply add some

JavaScript code into your site code

and tracking begins. • Great for seeing the density of interest

on a given page, how far people scroll

down, and if there are any changes in

that behavior based on where they

came from.

DP

A/B TESTING

• Google Analytics offer the ability

to do A/B Testing for free (http://

www.newmediacampaigns.com

/blog/google-analytics-ab-split-

test-tutorial) • Optimizely also offers A/B

Testing but has a cost (https://

www.optimizely.com/ab-testing/)

DP

Visual Design

DP

Great design is making something memorable

and meaningful. ~Dieter Rams

Photo by Martin Thomas, Flickr

DP

WHERE ON THE SPECTRUM?

calm energizing

traditional modern

typical unexpected

authoritative informal

novice power user

DP

DESIGN TRENDS

• Flat Design - removing of gradients happened with iOS and since then the web has not

looked back. The new flat design allows UXers to create new interactions previously held

back by 3D skumorphic gradients.

• Emphasis on Type - until CSS3 beautiful typography was trapped in JPG and GIFs, since

then the web has become much more beautiful and can communicate even more about an

organization through the typography chosen.

• Long Scrolling & Parallax Effects - we’ve seen the end of the “fold”. generation Z

expects and enjoys the long scrolling pages and see parallax effects as modern and

engaging.

DP

DESIGN TRENDS

• Cinematic Experiences & Ambient video - with bandwidth no longer a concern and a

desire of audiences to feel immersed in an experiences we’ve seen videos take over the full

screen. To bring even more life and realism sites like AirBnB and Cornell University have been

experimenting with ambient video loops that act as large moving photographs that make

users feel as if they are there on campus without having to hit play.

• Grid Layouts - aside from being touch friendly easily adaptable and responsive to varying

devices, card design and grid layouts content into share-able objects.

• Micro Interactions - with the rise of JS libraries it’s now possible to give websites an app-

like feel. where the page doesn’t refresh to submit a newsletter subscription but beautifully

transitions to let the user know the data was captured. These micro animations and

interactions add a level of elegance to the experience.

DP

DP

DP

DP

DP

DP

DP

GETTING TO THE RIGHT DESIGN

• Take a look at the competition

• Take a look at modern sites & design trends

• Decide where you want to be on the spectrum

• Color, images and breaking patterns can bring focus

• Reserve certain colors for clickable items

• Put buttons on the axis of interaction

• Limit # colors & fonts and be consistent

DP

Interactions & Technology

DP

INTERACTIONS & TECHNOLOGY

• Responsive Design - using JS and media queries to transform the page elements based on the width of the browser

• Interactions, Animations and Transitions - using ajax to submit form data an return results without a page refresh for app-like feel

• Device Specific Features - accelerometer in the iphone, etc

DP

So…

DP

Content + Design + Interaction

BUILDING BLOCKS of UX

DP

STAGES of UX

Define Your Mission

Understand Your Users

Create Your Content

Organize Your Content

Craft the Experience

Test the Experience

Visual Design

Interactions & Technology

DP

Focus on feelings

Continually work on balancing user needs and organizations goals

Use all tools to create the experience – content, design and interaction.

THE BEST EXPERIENCES

DP

Q&A