How to Train Your Brain to QA any Website

page 2 page 2

Contents

• Define “Quality Assurance” • Who Cares About QA • Bad QA vs. Proper QA • The WTF Approach • Fun QA Activity Time • Questions

Define “Quality Assurance”

page 4 page 4

The Definition

“Quality Assurance” is: a system for ensuring a desired level of quality in the development, production, or delivery of products and services.

page 5 page 5

What It Means for Websites

“Quality Assurance” is: finding errors (bugs) and reporting them.

page 6 page 6

Upgraded Version 2.1

“Quality Assurance” is: Unconsciously finding opportunities to improve the website (product) and providing insightful recommendations.

NOT “JUST USER EXPERIENCE”!

Who Cares About QA?

page 8 page 8

Anyone Checking for Errors

• Quality Assurance Department • Web Developers • Project Managers • Bloggers • Nitpicky People and…

page 9 page 9

All Y’all

YOU!

To QA is to Kaizen(what does that mean?)

© 2014 SEER Interactive | All Rights Reserved page 11 © 2014 SEER Interactive | All Rights Reserved page 11

Bad QA vs. Proper QA

page 13 page 13

In this corner: Bad QA

What you think is better for the site

page 14 page 14

In This Corner: Proper QA

What will further improve the site on top of its purposeful development

Example

page 16 page 16

Purposeful Development

Advertisement was a strategic choice by the NFL.

Static unchanging image indicates push for promoting fantasy football to users.

Contrasting yellow color draws users’ eyes to button.

Text content further promotes and supports fantasy football.

Easily accessible links to videos and news articles.

page 16 page 16

Example: Bad QA

I don’t like how there is a blatant advertisement here!

I don’t like that this large space has a faded image that does not change!

I don’t like the way this button looks with its text!

I don’t like seeing this area broken up below the image!

I don’t like the ordering of these links from left to right!

page 16 page 16

Example: Proper QA

Recommend placing the ad above the navigation bar.

Recommend changing the faded lights to an image of a crowded stadium.

Recommend changing font color to white with shadow.

Recommend update but may not change due to branding.

Recommend adding graphics next to links for readability.

The WTF Approach

W - Wanderer

page 21 page 21

Chill Website

“This site is pretty cool, yep.”

page 22 page 22

Wanderer

• No purposeful direction • More interested in browsing • Flashy design looks interesting • Does not compare with others • Overlooks obvious errors • Slow to frustration

T - Traveler

page 24 page 24

Recognized Website

“This site looks familiar.”

Trusty Web Browser

page 25 page 25

Traveler

• Clear, purposeful direction • Interested in visiting again • Design should help find item • Compares to other websites • Takes note of obvious errors • Average time to frustration

F - Foreigner

page 27 page 27

“I hate this site and I hate you!”

Web Developer

Website of Confusion

page 28 page 28

Foreigner

• Unclear, purposeful direction • Wants to find item, then leave • Design does not matter • Compares to THE competitor • Magnifies every minor error • Already frustrated

page 29 page 29

Wanderer, Traveler, Foreigner

The best website accommodates all types of visitors

Which One are You?

Fun QA Activity Time (Any Volunteers?)

page 32 page 32

Activity #1

• Choose wisely…

.EDU .ORG

page 33 page 33

Activity #2

• Choose wisely…

.COM .GOV

page 34 page 34

Activity #3

• Choose wisely…

.BIZ .NET

page 35 page 35

Fun QA Activity Takeaways

• How it felt entering the site • What elements stood out • Where the info was located • Why the site was easy/hard • When you will visit again • Visit many different websites

Did you notice the 24 errors in this presentation

?

Questions?