Download - Designing for next steps: A forward moving Web experience

Transcript
Page 1: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 2: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Designing for next steps(a forward moving Web experience)

Page 3: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

@nickdenardis

Page 4: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

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

Host of EDU Checkuphp://educheckup.com/

Curator of EDU Snippitshp://edusnippits.com/

Page 5: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Information Architecture

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

software to support usability.” - Information Architecture Institute

Page 6: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 7: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 8: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 9: Designing for next steps: A forward moving Web experience

@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

Page 10: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Good Design != Good UX

Page 11: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

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

going there…”

~ Des Traynor

Page 12: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 13: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 14: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

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

go.school.edu/grad-programs

Page 15: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Good UX = Good Design

Page 16: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

1. Junk2. 3. 4.

Page 17: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Care.

Page 18: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

First Impressions

Page 19: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 20: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 21: Designing for next steps: A forward moving Web experience

@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?

Page 22: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 23: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 24: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 25: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 26: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 27: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 28: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 29: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 30: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 31: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 32: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

1. Junk2. Good3. 4.

Page 33: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Test early, test often.

Page 34: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 35: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 36: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 37: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 38: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 39: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 40: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 41: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Woopra

Page 42: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Silos get in the way of your users

Page 43: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 44: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 45: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 46: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 47: Designing for next steps: A forward moving Web experience

@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>

Page 48: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 49: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 50: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 51: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 52: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

1. Junk2. Good3. Great4.

Page 53: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Use a human proxy

Page 54: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 55: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 56: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 57: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 58: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

We have limited time

Page 59: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

ClickTale

Page 60: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

People suck atreading online

Page 61: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 62: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 63: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 64: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

1. Junk2. Good3. Great4. Rememberable

Page 65: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

#littlebigdetailshttp://littlebigdetails.com/

Page 66: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Error messages matter

Page 67: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 68: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Reduce the barrierto completion

Page 69: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 70: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 71: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 72: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 73: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 74: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Creepy!

Page 75: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Details matter(pixels don’t)

Page 76: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 77: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 78: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 79: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 80: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 81: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 82: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 83: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 84: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 85: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Page 86: Designing for next steps: A forward moving Web experience

@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

Page 87: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV

Resources• google.com/analytics

• slickplan.com

• intercom.io

• woopra.com

• clicktale.com

• freegeoip.net

• lilebigdetails.com

Page 89: Designing for next steps: A forward moving Web experience

@nickdenardis #CASEV