Designing for next steps: A forward moving Web experience

Post on 26-Jan-2015

675 views 3 download

Tags:

description

Getting a visitor to your website is only half the battle. How do you keep them? A lot of attention is put on the "action" items on a homepage, but it's more likely a visitor is landing on an interior page from a Web search or link. Every visual element, content or cue makes an impression with your visitor and influences what next step they take. The last thing you want to do is leave your visitor at a dead end or continuously force them to use the back button. With each page having a defined next step it gives your visitor a forward moving Web experience. The idea is more than just bigger and brighter action buttons. No matter how large you make them your visitors are not going to click if they don't care. Your goal is the design an experience to make your visitors care.

Transcript of Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

@nickdenardis #CASEV

Designing for next steps(a forward moving Web experience)

@nickdenardis #CASEV

@nickdenardis

@nickdenardis #CASEV

Associate Director of Web Communications Wayne State Universityhp://wayne.edu/

Host of EDU Checkuphp://educheckup.com/

Curator of EDU Snippitshp://edusnippits.com/

@nickdenardis #CASEV

Information Architecture

“the art and science of organizing and labeling websites, intranets, online communities and

software to support usability.” - Information Architecture Institute

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

User Experience“a person's perceptions and responses that result from the use or anticipated use of a

product, system or service"- ISO 9241-210

@nickdenardis #CASEV

Good Design != Good UX

@nickdenardis #CASEV

“To understand any individual screen, you must understand the chain of events that led to a user

going there…”

~ Des Traynor

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

school.edu/page.asp?id=1245or

go.school.edu/grad-programs

@nickdenardis #CASEV

Good UX = Good Design

@nickdenardis #CASEV

1. Junk2. 3. 4.

@nickdenardis #CASEV

Care.

@nickdenardis #CASEV

First Impressions

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

Can I trust this page?

Is the information up to date?

Can I use this page as a resource in the future?

What do they want me to do on this page?

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

1. Junk2. Good3. 4.

@nickdenardis #CASEV

Test early, test often.

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

Woopra

@nickdenardis #CASEV

Silos get in the way of your users

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push( ['_setAccount', 'UA-xxxxxxxx-1'], ['_trackPageview'], ['b._setAccount', 'UA-xxxxxxxx-1'], ['b._trackPageview'] );

(function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

1. Junk2. Good3. Great4.

@nickdenardis #CASEV

Use a human proxy

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

We have limited time

@nickdenardis #CASEV

ClickTale

@nickdenardis #CASEV

People suck atreading online

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

1. Junk2. Good3. Great4. Rememberable

@nickdenardis #CASEV

#littlebigdetailshttp://littlebigdetails.com/

@nickdenardis #CASEV

Error messages matter

@nickdenardis #CASEV

@nickdenardis #CASEV

Reduce the barrierto completion

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

Creepy!

@nickdenardis #CASEV

Details matter(pixels don’t)

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

@nickdenardis #CASEV

1. JunkGet a baseline understanding of your visitors

2. GoodEntice them to get just one step further

3. GreatWalk along their journey

4. RememberableAdding a few #lilebigdetails

@nickdenardis #CASEV

Resources• google.com/analytics

• slickplan.com

• intercom.io

• woopra.com

• clicktale.com

• freegeoip.net

• lilebigdetails.com

@nickdenardis #CASEV