UX Bootcamp @ General Assembly Atlanta

UXD BOOTCAMPJACKLYN BURGAN, UX RESEARCHER + STRATEGIST

‣ Jacklyn Burgan‣ UX Researcher + Strategist‣ @playfulpixel // @LadiesThatUXATL

HELLO

‣ Jacklyn Burgan‣ UX Researcher + Strategist‣ @playfulpixel // @LadiesThatUXATL

HELLO

‣ http://bit.ly/19i4uvc

SLIDES!

‣ Introduction to user experience design + usability‣ Introduction to user experience documentation + deliverables + software‣ Introduction to usable web forms

WHAT WE’LL COVER TODAY

USER EXPERIENCE DESIGN + USABILITY

UXD BOOTCAMP

‣ Describe the field of UX + how it relates to other disciplines‣ Identify the different roles within UX + the responsibilities of each‣ UX Process: Traditional [“Waterfall”], Agile, Lean‣ Learn to conduct UX research

LEARNING OBJECTIVES

WHAT IS USER EXPERIENCE DESIGN [UXD]?

“User experience design (UXD or UED) is the process of enhancing user

satisfaction by improving the usability, ease of use, and pleasure provided in the

interaction between the user and the product.” — Wikipedia

“The design of anything independent of medium or across [device] with human

experience as an explicit outcome and human engagement as an explicit goal”

— Jesse James Garrett, co-founder of Adaptive Path

“User experience encompasses all aspects of the end-user's interaction with the

company, its services, and its products.” — Nielsen Norman Group

WHAT IS USABILITY?

“Usability is a quality attribute that assesses how easy user interfaces are to use.

The word "usability" also refers to methods for improving ease-of-use during the

design process.” — Nielsen Norman Group

“Usability is the ease of use and learnability of a human-made object. The object

of use can be a software application, website, book, tool, machine, process, or

anything a human interacts with.” — Wikipedia

UX BOOTCAMP

UX JOBS + RESPONSIBILITIES

UX JOBS + RESPONSIBILITIES: BLUEPRINT

‣ UX Designer‣ Experience Designer‣ Interaction Designer [IxD]‣ Information Architect [IA]

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

INTERACTION DESIGNER [IXD]

‣ Focus only on the interaction between the human + the computer‣ Designing for affordances

‣ Structure‣ What are all the things a user is able to do / places a user can visit? ‣ Taxonomy‣ User Flows

INFORMATION ARCHITECT

‣ Structure‣ What are all the things a user is able to do / places a user can visit? ‣ Taxonomy‣ User Flows

INFORMATION ARCHITECT

+ + + + + +

2

Saved Search

Starred

Following

Recent

Popular

Nearby

Filter

Search

Results

Project

Gallery

Submit

New Project

My Profile

Settings

Edit Profile

Adv Options

Edit Notification

Edit SharingUsers

StarredUser Profile

Users Submits

My Projects

Share

Login

Home

Launch

Users Projects

Edit Project

Download

Other User

Not Logged In

Help

+

My Submits

UX JOBS + RESPONSIBILITIES: BUSINESS STRATEGY

‣ UX Strategist‣ UX Architect‣ UX Product Manager‣ UX Analyst

UX ANALYST

‣ Responsible for configuring metrics for products‣ Carry out usability tests‣ Assists teams to make data driven decisions

UX ANALYST

‣ Responsible for configuring metrics for products‣ Carry out usability tests‣ Assists teams to make data driven decisions

UX JOBS + RESPONSIBILITIES: VISUAL DESIGN

‣ Visual Designer‣ UI Designer‣ Digital Designer‣ Designer

UX JOBS + RESPONSIBILITIES: VISUAL DESIGN

‣ Responsible for the “pretty” part of the product

UX JOBS + RESPONSIBILITIES: VISUAL DESIGN

‣ Responsible for the “pretty” part of the product

UX JOBS + RESPONSIBILITIES: VISUAL DESIGN

‣ Responsible for the “pretty” part of the product

UX JOBS + RESPONSIBILITIES: RESEARCH / USABILITY

‣ UX Researcher‣ Usability Researcher‣ Usability Specialist‣ Usability Analyst‣ Usability Engineer

UX RESEARCHER

‣ Identify user needs + behaviors‣ Interviews‣ Surveys‣ Examining data

‣ Carry out user testing

UX RESEARCHER

‣ Identify user needs + behaviors‣ Interviews‣ Surveys‣ Examining data

‣ Carry out user testing

UX JOBS + RESPONSIBILITIES: CONTENT STRATEGY

‣ Content Strategist‣ UX Copywriter

UX JOBS + RESPONSIBILITIES: CONTENT STRATEGIST

‣ Responsible for the planning, development, + management of content—written or in other media.

UX JOBS + RESPONSIBILITIES: CONTENT STRATEGIST

‣ Responsible for the planning, development, + management of content—written or in other media.

UX JOBS + RESPONSIBILITIES: DEVELOPMENT

‣ UX/UI Engineer‣ UX/UI Developer‣ Product Designer

ENGINEERING / IMPLEMENTATION

‣ Works closely with UX to implement designs

ENGINEERING / IMPLEMENTATION

‣ Works closely with UX to implement designs

Carrier 12:00 PM

MediaTask

TitleDescription

#Submit

sNew Task ProfileFeed

TitleDescription

#

TitleDescription

#

TitleDescription

#

T7 Profile PageTap to view Profile Page. Transitional animation: no animation

T8 Create ProjectTap to Create a New

Project. Transition: display cut to new view w same footer and new highlight

state, no animation

T2 Feed Tap to view Feed Page (Home

Page). Transition: display cut to new view w same footer and new

highlight state, no animation. Until page contents loads display

header, footer, and a loading spinner w message.

T5 Project PageTap to view Project Page. Transitional animation: slide left from right When a project has no submissions display a Submit button that takes users directly to the camera capture step. See T5

Project List Item Includes Image

from project creator, Title,

Description, # of Submissions, and

up to 5 of the most recent submission

images.

Drag list down to refresh feed.Display with animating arrow or spinner and message:"Pull down to Refresh""Release to Refresh""Updating""Not Connected to Interent"

T1 InfoTap to view Info

page. Transitional

animation: slide up from bottom

T10 SearchTap to view Search Page. Transitional animation: slide left from right When a project has no submissions display a Submit button that takes users directly to the camera capture step. See T5

M3 FilterTap to view Info

Filters. Transitional

animation: slide up from bottom

Carrier 12:00 PM

TitleCategory ## photos ## videos submittedUser Name

My Projects Recent Popular

MediaTask

T8 Create ProjectTap to Create a New Project. Transition: display cut to new view w same footer and new highlight state, no animation

Pull down to refresh.

Search

Title, by User Name

0/100

Category | ## | ## | ## Days leftDescription...

10/40

The Title of the Prject, by User Name Category | ## | ## | ## Days left

Description...

10/40

The Title of the Prject, by User Name Category | ## | ## | ## Days left

Description...

Swipe to navigate, tap to select Feeds . Default feed is Recent.

T5 Project PageTap to view Project Page. Transitional animation: slide left from right When a project has no submissions display a Submit button that takes users directly to the camera capture step. See T5 This is a project with no submissions.

M1 Project List Item Includes Title, User Name,

Project Image, Category, # of photos, # of videos, # days left till project close, Description, Goal Gauge,

optional gallery.

Drag list down to expose search, and then refresh feed. On release without reaching refresh threshold keep search visible. Upon reaching refresh threshold display with animating arrow or spinner and message:"Pull down to Refresh" >"Release to Refresh""Updating""Not Connected to Interent"

T3 Profile PageTap to view Profile Page.

Transitional animation: no animation

M3 FilterTap to view Filters.

Transitional animation: slide down from top

For projects with submissions, swipe

anywhere on a list item to navigate a gallery of up to 10 recent entries. Swiping

also displays the submissions button. See M1 for full specification.

FeedsMy SubmissionsStarredMy ProjectsFollowingRecentPopularNearby

T10 SearchTap to view Search.

Transitional animation: slide keyboard up; expand the

height of search to include the location field, slide up list

of recent searches. see animation from Yelp Search.

UX BOOTCAMP

UX PROCESS

TRADITIONAL UX PROCESS [“WATERFALL”]

‣ Discover‣ Define‣ Design‣ Develop‣ Deliver

DISCOVER

‣ Gather information‣ Brainstorming‣ Competitive analysis‣ Define the project scope‣ UX deliverables: personas + user scenarios

DEFINE

‣ Developing interaction model‣ Define the content + functionality requirements‣ Define information architecture‣ Create a project plan‣ UX deliverables: product requirement document

DESIGN

‣ Create paper prototype / sketches‣ Usability evaluation‣ Create wireframes‣ Visual design explorations‣ Visual design approval‣ UX deliverables: sitemap, user flows, wireframes + UI designs

DEVELOP

‣ Architecture design‣ UML diagram / class diagram‣ Daily scrum‣ Code iteration cycles‣ Interim installers‣ Release management‣ Unit testing‣ Code refactoring‣ Documentation‣ UX deliverables: No key UX deliverables at this stage.

DELIVER

‣ Use cases‣ Test cases‣ Testing‣ Regression testing‣ Test reports‣ Build releases‣ UX deliverables: usability test report

DRINK!

UX SHOULD BE ITERATIVE

Discover

Define

Develop

Deliver

Design

LEAN UX PROCESS

LEAN UX STORY FLOW

BREAK

UX BOOTCAMP

UX RESEARCH

WHY UNDERSTAND OUR USERS?

‣ So you don’t build a snow machine for an eskimo‣ Ensures you’re solving a problem that exists in peoples lives‣ Key to building a product that is tailored to its audience

WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS?

‣ Why?‣ Who?‣ What? ‣ Where?‣ When?‣ How?

UX BOOTCAMP

INTERVIEWING USERS

WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS?

‣ Why are they coming to us?‣ Goals?‣ What are their needs?

WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS?

‣ Who are our users?‣ Businesses vs. consumers? ‣ Demographics?‣ Background knowledge?‣ Understanding of terminology?

WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS?

‣ When are they visiting?‣ Morning or evening?‣ When they’re in a crisis?‣ Daily?‣ Monthly?

WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS?

‣ What are their habits?‣ Do they use social networks? ‣ Content producers or consumers?‣ What you ask depends on the product

WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS?

‣ How are they accessing?‣ Desktop or mobile?‣ Tablet?‣ Over the phone or in person?

UX BOOTCAMP

HOW TO GET THAT INFORMATION

HOW DO WE GET THAT INFORMATION?

‣ Research, Observe!‣ Surveys‣ User Interviews‣ Focus Groups‣ Existing data

UX RESEARCH: SURVEYS

‣ + Gather large numbers of responses very quickly‣ + Get quantitative or qualitative feedback immediately

‣ - Hard to get rich responses‣ - Often learn about problems but not why they occur

UX RESEARCH: USER INTERVIEWS

‣ + One-on-one discussion‣ + Can gather rich targeted information‣ + Flexible; can explore tangents or unexpected areas

‣ - Time consuming to organize, run + analyze

UX BOOTCAMP

HOW TO CONDUCT USER INTERVIEWS

FINDING PARTICIPANTS

‣ Where to find them:‣ Coffee shops‣ Asking your network‣ Social networks and forums‣ Craigslist / Gumtree ads

HOW TO ASK QUESTIONS

‣ Be wary of priming‣ Don’t ask leading questions‣ Never ask about intention, always probe behavior

‣ - “How many times do you plan to go to the gym?”‣ + “How many times have in the last 3 months?”

FOCUS ON SPECIFIC INSTANCES

‣ + “Have you ever had ________ problem”?‣ + “Tell about the last time you ....”

‣ Avoid generalizations:‣ - “What do you usually ...”

KEEP THEM TALKING

‣ + “Tell me more about that”‣ + “What do you mean by...”‣ + “Help me understand better..”

‣ Never put words into their mouth‣ - “So do you mean...”

PREPARING AN INTERVIEW

‣ Record interviews if possible‣ Always ask permission‣ Explain why + that it’s for private use

‣ Take notes but remain focussed on participant‣ Focus on topics rather than list of questions‣ Should be a conversation‣ If you divert off topic: “That’s really interesting. Can you tell me more

about ...”

TOPIC MAPS + DISCUSSION GUIDES

TOPIC MAP EXERCISE! - 50 MINUTES

‣ You are going to do a user interview about online shopping in order to better understand users’ fears + desires‣ Prepare a topic map covering all subjects you want to know [20m]‣ Split into groups of 3‣ 1 person will interview, 1 will record notes on post it notes, 1 person

will be interviewed‣ We will rotate every 10 minutes

‣ Be prepared to share!

UX BOOTCAMP

ANALYZING USER RESEARCH

CAPTURING INSIGHTS

‣ Straight after interview‣ Write down or identify the 3 most important insights

‣ When reviewing recording/notes‣ Write out each interesting point on individual post it

IDENTIFYING TRENDS BY CREATING AFFINITY MAPS

‣ Once you have all of your data, it’s time to analyze‣ Goal is to extract common trends / themes‣ Post-Its are your friends

AFFINITY MAP EXERCISE! - 30 MINUTES

‣ Everyone should have a pile of post it notes‣ One group will place their notes on the wall + read out the insight ‣ If another group has a similar insight they will place it on top‣ Repeat until all the post it notes are placed on the wall‣ Create themes from the grouped insights

AFFINITY MAP

UX BOOTCAMP

PERSONAS

PERSONAS

‣ An example, generally fictional, of a person within your user base

‣ Created by conducting user research + summarizing trends into one or more archetypes

PERSONAS: WHY THEY’RE IMPORTANT

‣ Communication tool‣ Useful for summarizing what you know about your user‣ Will help to highlight pain points + opportunities to tailor your product to

your user‣ Keep your product focused on your key users rather than building for the

whole world.‣ [Keep in mind it’s just a framework, not a roadmap]

PERSONAS: WHAT SHOULD BE INCLUDED

‣ Root it in reality not your imagination‣ Goals / Needs‣ Behaviors‣ Biographical information [name, age, gender, location, income, etc]‣ Optionally assign it personality traits [again, based on your research]

PERSONAS: SCENARIOS

‣ Short stories about a person using you product to achieve a goal‣ Describes what they would do + why they would do it‣ Independent of interface‣ Gives the context in which its used

PERSONAS: EXAMPLE

PERSONAS: EXAMPLE

PERSONAS: TEMPLATE

UX BOOTCAMP

PROVISIONAL PERSONAS

PROVISIONAL PERSONAS

‣ Provisional Personas are personas created without primary research‣ They can be created through empathy mapping techniques‣ They need to be validated as soon as possible with real users as part of

the build, measure, learn loop

PROVISIONAL PERSONAS: EMPATHY MAP

PROVISIONAL PERSONAS: EMPATHY MAP COMPLETED

PROVISIONAL PERSONAS EXERCISE! - 30 MINUTES

‣ Treat your table as a team‣ Draw an empathy map on your table‣ Based on insights from your interviewing exercise, project yourself into

the mind of someone making a large purchase online

PROVISIONAL PERSONAS: EMPATHY MAP

‣ What does she Think or Feel? [What matters?]‣ What does she See? [environment, friends, solutions in the market]‣ What does she Say + Do? [appearance, activities, behaviors]‣ What does she Hear? [What do friends, boss, colleagues say?]‣ Pain [fears, frustrations, obstacles]‣ Goals [wants, needs, desires]

UX BOOTCAMP

CHALLENGES WITH PERSONAS

CHALLENGES OF PERSONAS

‣ They can be artificial / abstract / fictitious‣ They are a composite sketch of 10 people all rolled into 1‣ They don’t have opinions ‣ They can’t talk back, answer questions, or give feedback

BREAK

DOCUMENTATION + DELIVERABLES +SOFTWARE

UXD BOOTCAMP

‣ Learn about personas, user flows, sitemaps, wireframes‣ Determine when to use which documentation‣ Discover new tools + frameworks for creating deliverables

LEARNING OBJECTIVES

DOCUMENTATION + DELIVERABLES: DESIGN STRATEGY

‣ Blueprint‣ Consumer Journey Map ‣ User Stories‣ Personas‣ Ecosystem Map ‣ Competitive Audit ‣ Value Proposition ‣ Stakeholders Interviews ‣ Key Performance Indicators

DOCUMENTATION + DELIVERABLES: CONCEPTING

‣ Brainstorming ‣ Moodboards ‣ Storyboards ‣ User Flow ‣ Task Analysis ‣ Taxonomies

DOCUMENTATION + DELIVERABLES: PRODUCT PLANNING

‣ Content Audit ‣ Heuristic Analysis ‣ Sitemap ‣ Features Roadmap ‣ Use Cases + Scenarios ‣ Metrics Analysis

DOCUMENTATION + DELIVERABLES: UX RESEARCH + VALIDATION

‣ Focus Group ‣ Quantitative Survey ‣ Usability Test ‣ Card Sorting ‣ One-on-one Interview‣ A/B Test ‣ Eyetracking ‣ Accessibility Analysis

DOCUMENTATION + DELIVERABLES: UI DESIGN

‣ Sketches ‣ Wireframes ‣ Prototypes‣ Pattern Library

UX BOOTCAMP

TOOLS + SOFTWARE

TOOLS + SOFTWARE: WIREFRAMES + PROTOTYPES

‣ UX Pin ‣ Wireframe.cc ‣ Solidify App‣ Proto.io ‣ InVision ‣ P.O.P. app ‣ Axure ‣ Paper sketches ‣ Flinto‣ Protoskecth

‣ Mockups.me‣ Appery‣ Realizer App‣ Framer JS‣ Easel‣ Power Mockup‣ Moqups‣ Keynote Kung Fu‣ Antetype‣ AppSketcher

‣ HotGloo‣ FlairBuilder‣ Pidoco‣ Pencil Project‣ FileSquare‣ Concept.ly‣ MockingBird‣ Mockflow‣ iPlotz‣ Balsamiq

‣ OmniGraffle‣ Fluid‣ Handcraft‣ Composite

TOOLS + SOFTWARE: RESEARCH + TESTING

‣ Wufoo ‣ TypeForm ‣ Bagel Hint ‣ Verify App ‣ Usabilla ‣ Morae‣ UX Recorder‣ Google

Hangouts ‣ PollDaddy

‣ SurveyGizmo‣ SurveyMonkey‣ WebNotes‣ LiveChat‣ Frelay‣ iPerceptions‣ Kampyle‣ Qualaroo‣ UserVoice‣ Webreep

‣ Intuition HQ‣ Usability Hub‣ UsersThink‣ Plain Frame‣ Chalkmark‣ Plunk‣ SilverBack 2.0‣ Delight.io‣ MagiTest‣ Camtasia

‣ Jing‣ Try my UI‣ Qualtrics

TOOLS + SOFTWARE: ORGANIZING INFORMATION

‣ Lucid Chart‣ MindMeister‣ Coggle.it‣ Optimal Sort‣ Concept Codify‣ WebSort‣ Simple Card Sort‣ Xsort

TOOLS + SOFTWARE: DIAGRAMS + SITEMAPS

‣ Gliffy‣ Lovely Charts‣ Creately‣ Google Drawings‣ Draw.io

TOOLS + SOFTWARE: MIND MAPS

‣ Xmind‣ Mind Node‣ Mindjet‣ FreeMind

TOOLS + SOFTWARE: ANALYTICS + METRICS

‣ Crazy Egg ‣ Good Data ‣ KISSmetrics ‣ Mix Panel ‣ Google

Analytics‣ Lucky Orange‣ Live Person‣ Myna Web‣ HiConversion

‣ Tableau‣ Maxymiser‣ App Annie‣ Flurry‣ Woopra‣ Quantcast‣ Piwik‣ Clicky‣ Attention Wizard‣ Click Density

‣ Click Tale‣ Inspectlet‣ FullStory

SOFTWARE EXERCISE! - 60 MINUTES

‣ Divide into pairs‣ Research assigned software tool + report back to the group‣ Things to look for include:

‣ Is there a free trial?‣ Pricing‣ Features‣ Download / cloud?

‣ Be prepared to share!

WEB FORMSUXD BOOTCAMP

‣ Identify the different elements of forms + how to use them effectively‣ Learn what makes a strong user experience with forms‣ Identify expected outcomes

LEARNING OBJECTIVES

WEB FORMS: PRINCIPLE

‣ Reward, acknowledge, explain + reassure‣ This principle applies to all UX, not just forms‣ The user is King Baby, a god, or a small child

‣ No attention span‣ Can only process one idea at a time‣ Impatient‣ Demanding‣ Insecure

‣ Anticipate their every need + concern‣ Play a game with lots of little “wins” to keep them motivated

WEB FORMS: PRACTICE

‣ Filling out a form is work + users are lazy‣ The goal is to reduce the amount of work ‣ Secondarily, reduce the appearance of how much work it really is

‣ Use selectors wherever possible; avoid reliance on free text input‣ Free text is the most work + the most error-prone

WEB FORMS: INDICATE PROGRESS

‣ For longer forms, there should be some visualization of overall completeness‣ Progress bar, % complete, green checkmarks, etc.

‣ For shorter forms this is less important‣ Field-by-field validation is still a nice thing to do

WEB FORMS: PROVIDE REASSURANCE

‣ Over-explain why you’re asking for this information‣ This goes double for sensitive info such as financial or medical

‣ If there are any in-depth questions, be sure to address them in the form‣ Amazon’s “What’s this?” or “Why we ask” links

WEB FORMS: KEEP ON SELLING

‣ Abandonment is most likely to happen during form completion

‣ Remind the user why it’s valuable to complete the process

WEB FORMS: FORGIVE ERRORS

‣ Don’t lose their data!‣ User error cannot be allowed to break the system

‣ Make sure you have in-line methods of dealing will all error types‣ Misspellings, skipped fields, wrong data type, etc.

‣ Alert the user visually with color + clearly explain what’s needed

WEB FORMS: ALLOW CONFIRMATION

‣ When possible, use a confirmation page‣ With longer forms, allow user to navigate back through form

‣ Use this approach when repeating the data would require a very large/complex interface

WEB FORM COMPONENTS: SINGLE SELECTORS

mm/dd/yyyyDate:

- Select One -Select Field:

Radio Button Array:

Option 2

Option 1

Option 4

Option 3 Option 5

Slider:1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 27 28

29 30 31 1 2 3 4

5 6 7 8 9 10 11

26

Su Mo Tu We Th Fr Sa

July 2007 ><

WEB FORM COMPONENTS: MULTI SELECTORS

Full List My Items

>

<

Item 1Item 2Item 3Item 4

none

Multi-select:

Checkbox Array:

✔ Option 2

Option 1

Option 4

✔ Option 3 ✔ Option 5

WEB FORM COMPONENTS: PROGRESS INDICATORS

WEB FORM COMPONENTS: FREE INPUTS

Error TitleRecovery instructions appear in this space

Field Label:

Instructional text associated with this field

Field Label:

Instructional text associated with this field

Textarea

Editor Controls

iB u 123

A abFormat Font Size

enter text

File input text Browse

UX BOOTCAMP

FORM TYPES + OUTCOMES

WEB FORMS: TYPES + OUTCOMES

‣ Contact Form‣ Lead Generation Form‣ Order Form‣ Event Registration Form‣ Survey

WEB FORMS: CONTACT FORM

‣ The simplest of web forms ‣ Purpose: to take users’ input and delivers it to your inbox‣ Typically it contains no more than three fields – Name, Email + Message ‣ Two main advantages over displaying your email id publicly:

‣ If you go sharing your email address all around you make yourself the victim of spammers.

‣ It’s way easier for a visitor to contact you just by filling in a couple of fields

WEB FORMS: CONTACT FORM

‣ The simplest of web forms ‣ Purpose: to take users’ input and delivers it to your inbox‣ Typically it contains no more than three fields – Name, Email + Message ‣ Two main advantages over displaying your email id publicly:

‣ If you go sharing your email address all around you make yourself the victim of spammers.

‣ It’s way easier for a visitor to contact you just by filling in a couple of fields

WEB FORMS: LEAD GENERATION FORM

‣ “Money is in the mailing list" mindset ‣ Purpose: to collect contact information of prospects ‣ A web form to collect people’s emails‣ When a user signs up or subscribes to your mailing list, you are granted

permission to email him/her regularly ‣ Can also be used on landing pages of company websites to capture

contacts for the sales cycle‣ Best practices: offer an incentive when you ask for people’s contact

details

WEB FORMS: LEAD GENERATION FORM

‣ “Money is in the mailing list" mindset ‣ Purpose: to collect contact information of prospects ‣ A web form to collect people’s emails‣ When a user signs up or subscribes to your mailing list, you are granted

permission to email him/her regularly ‣ Can also be used on landing pages of company websites to capture

contacts for the sales cycle‣ Best practices: offer an incentive when you ask for people’s contact

details

WEB FORMS: ORDER FORM

‣ PayPal, Google Checkout forms‣ Purpose: to collect payment for online purchases‣ This form lets you sell products online without setting up a laborious

shopping cart‣ Can be integrated with online payment gateways

WEB FORMS: ORDER FORM

‣ PayPal, Google Checkout forms‣ Purpose: to collect payment for online purchases‣ This form lets you sell products online without setting up a laborious

shopping cart‣ Can be integrated with online payment gateways

WEB FORMS: EVENT REGISTRATION FORM

‣ Eventbrite, nvite‣ Purpose: to find out how many people will actually turn up to your event‣ Gathers attendants’ contact data + other requested info

WEB FORMS: EVENT REGISTRATION FORM

‣ Eventbrite, nvite‣ Purpose: to find out how many people will actually turn up to your event‣ Gathers attendants’ contact data + other requested info

WEB FORMS: SURVEY FORM

‣ Market research, user research‣ Purpose: allows you to survey customers to get feedback‣ Can be used with prospective or current customers

WEB FORMS: SURVEY FORM

‣ Market research, user research‣ Purpose: allows you to survey customers to get feedback‣ Can be used with prospective or current customers

RESOURCESUXD BOOTCAMP

RESOURCES: READING

‣ UX Booth‣ UX Magazine‣ UX Matters‣ UX Zeitgeist‣ Smashing Magazine‣ UIE‣ A List Apart‣ Transitioning Careers‣ Medium Collection‣ Boxes and Arrows

‣ Hints from the Lazy Bear‣ 52 Weeks of UX‣ UX Apprentice‣ Usability First Glossary‣ UX Beginner

RESOURCES: BOOKS

‣ Smashing UX Design‣ Don’t Make Me Think, Revisited‣ The Elements of User Experience‣ The User Experience Team of One: A Research and Design Survival

Guide‣ It's Our Research: Getting Stakeholder Buy-in for User Experience

Research Projects‣ Designing Together: The collaboration and conflict management

handbook for creative professionals

RESOURCES: UXERS YOU SHOULD KNOW

‣ Jakob Nielson‣ Jared Spool‣ Alan Cooper‣ Dana Chisnell‣ Nate Bolt‣ Peter Morville‣ Stephen Anderson‣ Steve Krug‣ Luke Wroblewski

RESOURCES: COMPANIES OF NOTE

‣ Nielsen Norman Group‣ Adaptive Path‣ IDEO‣ Smart Design‣ Frog Design‣ Cooper Design

RESOURCES: LOCAL ORGANIZATIONS

‣ Ladies that UX‣ Atlanta Web Design Group‣ IXDA‣ CHI Atlanta

RESOURCES: CONFERENCES

‣ Lean UX NYC‣ GIANT‣ Madison+ UX 2015‣ Interaction 16‣ SIGCHI‣ MX2015‣ IA Summit‣ Gel Conference‣ Enterprise UX‣ #dareconf

QUESTIONS?UXD BOOTCAMP

THANKS!UXD BOOTCAMP