Practical Design for Ajax
Development


             David Verba
             david@adaptivepath.com
2
2
“We learn to describe the
things we see, but we also
see the things we can
describe.”
“Word Games” by David Womack, Print ...
This Session Includes:

A survey of design principles.
A framework for understanding design practice
Language for communic...
5
is design
the new black?
                 5
6
visual
 interaction
information
   service
               6
A Successful Product
 Depends On:

The experience your users have and
how well your product serves their needs.



       ...
8
What about this one?
                       9
Or this one?
               10
Prioritizing Users




           “traditional” bench     “anti-homeless” bench
             Citizens                Polic...
What makes a bench
   successful?




                     12
City’s Perspective
Discourages homelessness

“Good” citizens use them

Reduced loitering, drug dealing, and petty crime


...
Citizens’ Perspective
Cleaner

Welcoming

A pleasant place to spend some time


                                      14
Are these benches
   successful?
                    15
Is there
another path?


Sean Godsell’s Park Bench House
                                  16
Know Who Your Users Are



You must know and design
   for all of your users.

                            17
A Self-Assessment Tool for
         Teachers            18
The original desktop app:




                            19
option 1: literal translation




                                20
option 2
old style: use “best
practices” and your
own experience
                       21
A Teacher’s Day
With children from 7:30am to 3:30pm.
Often takes lunch with the children.
Rarely has more than 5-10 minute...
option 3
design interface to
support context of
use and actual tasks
                       23
option 3a
use AJAX to
improve interface
responsiveness




                    24
needs
superintendent   To know how well schools are performing



     /|
  principals     To know how well teachers are p...
Understand Your Users

know their...
context
motivations
challenges
                        26
The
Elements of
User
Experience
by Jesse James
Garrett




                 27
Concrete



surface


skeleton


structure


 scope


strategy    Abstract




                       28
surface
            Concrete
                       What will the finished product
                       look like?
surfa...
surface
            Concrete
                       What will the finished product
                       look like?
surfa...
surface
            Concrete
                       What will the finished product
                       look like?
surfa...
surface
            Concrete
                       What will the finished product
                       look like?
surfa...
surface
            Concrete
                       What will the finished product
                       look like?
surfa...
strategy                      Concrete



                  surface

What do we
                  skeleton
want to get out...
Your
   Your
                         User’s
   Goals
                         Needs



Strategic Sweet Spot:
Where user n...
Your
   Your
                         User’s
   Goals
                         Needs



Strategic Sweet Spot:
Where user n...
Know Your Stakeholders




                         36
Know Your Stakeholders

A stakeholder is anyone who has an
interest in the outcome of a project.

                        ...
Site Objectives:
what do you want to achieve?


                               37
Revenue
   Objectives



Site Objectives:
revenue objectives   38
Site Objectives:
operational improvements   39
Your Users:
identify all of them   40
Jesse
white male
age 25-40
city-dweller
computer professional
married, no children
income >100K


                        41
Talk to your users
                     42
43
Observing
the User
Experience
by Mike
Kuniavsky




             44
Evolving Strategy
                    45
Evolving Strategy
                    45
HIGH                                                                  Snapfish


                                         ...
HIGH                                                                  Snapfish


                                         ...
scope                            Concrete



                     surface

What features
                     skeleton
wil...
HIGH                                                                  Snapfish


                                         ...
Functional Specifications
    What the site must include.   49
Don’t try to be
 everything to
  everybody.
                  50
select          core features

    fulfill        enrich feature set

 expand            move into new areas


    Impleme...
select          core features

    fulfill        enrich feature set

 expand            move into new areas


    Impleme...
select          core features

    fulfill        enrich feature set

 expand            move into new areas


    Impleme...
select          core features

    fulfill        enrich feature set

 expand            move into new areas


    Impleme...
Your App



Ecosystem of Applications
(you don’t have to be everything to everybody)   52
structure                        Concrete



                     surface

How will the
                     skeleton
piec...
Interaction
Design
How the user
moves from one
step in a process
to the next.

                    54
Interaction Frameworks
                         55
Interaction Frameworks
                         55
Interaction Frameworks
                         56
pages




Interaction Frameworks
                         56
Select
  label

                   go!




pop-ups

                         pages




Interaction Frameworks
            ...
Select
  label

                   go!


                                         Select
                                 ...
58%




58%            58%




              58%
                    GO!




Think Modularly
                           57
About Face
2.0: The
Essentials of
Interaction
Design
by Alan Cooper &
Robert Reimann



                   58
Information
Architecture
How the user
moves from one
content element
to the next.

                  59
Granularity
              60
apple
pear
banana
fruit




         Granularity
                       60
apple      apple
pear       pear
banana     banana
fruit
           fruit




         Granularity
                       60
apple      apple       fruit
pear       pear        apple
banana     banana      pear
                       banana
fruit
...
Labeling
           61
human resources




  Labeling
                  61
human resources

employment opportunities




      Labeling
                           61
human resources

employment opportunities

         jobs

      Labeling
                           61
Consistency
              62
about us      this company
about         who we are
our company   who are we?



       Consistency
                      ...
Information
Architecture
for Large-
Scale Web
Sites
by Louis
Rosenfeld and
Peter Morville


                 63
skeleton                       Concrete



                   surface

What
                   skeleton
components will
en...
Make finding things easy
discoverability
                  Actions should be
recoverability    without cost
              ...
Discoverability
Make finding things easy   66
from icq.com   67
from .com   68
from yahoo.com   69
from oldnavy.com   70
from farecast.com   71
Recoverability
Actions should be without cost   72
73
from blogger.com
from travelocity.com   74
from farecast.com   75
from farecast.com   75
from farecast.com   75
from travelocity.com   76
from farecast.com   77
from google.com   78
from amazon.com   79
from Measure Map   80
Context
A sense of time, place, and meaning   81
from amazon.com   82
from gap.com   83
from gap.com   84
from gap.com   85
from blogger.com
         86
Feedback
How the system responds   87
Provide Clear Error Messages for Users
                                         88
Provide Clear Error Messages for Users
                                         88
from basecamphq.com   89
from napyfab.com   90
The job requires extra pluck
         graphic
                                                                            ...
The job requires extra pluck
         graphic
                                                                            ...
The job requires extra pluck
         graphic
                                                                            ...
The job requires extra pluck
         graphic
                                                                            ...
The job requires extra pluck
         graphic
                                                                            ...
surface                        Concrete



                   surface

What will the
                   skeleton
finished ...
Design is not just cosmetic.



                               93
also
Design is not just cosmetic.



                               93
The Attractiveness Bias*
  ruthlessly stolen from “Universal Principles of Design” by Lidwell, Holden, and Butler
        ...
95
96
“Even if a website is highly
usable and provides very
useful information presented
in a logical arrangement, it
may fail t...
who do you trust?   98
Personality
              99
what do each of these say to you?   100
Visual Design
                101
The Non-
Designer’s
Design Book
by Robin
Williams




              102
               23
CRAP

c    contrast
r    repetition
a    alignment
p    proximity
                  103
CRAP

c    contrast
r    repetition
a    alignment
p    proximity
                  103
CRAP

c    contrast
r    repetition
a    alignment
p    proximity
                  103
CRAP

c    contrast
r    repetition
a    alignment
p    proximity
                  103
CRAP

c    contrast
r    repetition
a    alignment
p    proximity
                  103
contrast
                 Rich Web Experience

repetition           San Jose, CA

alignment        September 6-8, 2007

  ...
contrast
             Rich Web Experience
repetition            San Jose, CA



alignment       September 6-8, 2007


    ...
contrast
             Rich Web Experience
repetition   September 6-8, 2007 | San Jose, CA




alignment
                  ...
contrast
repetition
             Rich Web Experience
             September 6-8, 2007 | San Jose, CA

alignment           ...
contrast
repetition
             Rich Web Experience
             September 6-8, 2007 | San Jose, CA

alignment           ...
Visual Design


Even simple improvements
 make a huge difference.

                           109
Documentation
                110
Functional Annotations
                  1
                                                                               ...
“Wireframing AJAX is a
[expletive]... We have
to determine all the
things a user might do,
and wireframe the
blessed momen...
Storyboards   113
Mouse                                                                                  Drag Over                          ...
branding & navigation
Participant Interface Notes

                                                                       ...
branding & navigation
Participant Interface Notes

                                                                       ...
Wireframes with Key Frames
                         116
Show me




Lo-Fi Animations
Hide me

Fill in:
|
           Add




    Lo-Fi Animations
Hide me

Fill in:
Pickles|
           Add




 Lo-Fi Animations
Hide me

Fill in:
Pickles|
           Add




 Lo-Fi Animations
Hide me

Fill in:
Pickles|
           Add




 Lo-Fi Animations
Hide me

Fill in:
Pickles       X



|
           Add




    Lo-Fi Animations
Hide me

Fill in:
Pickles       X



|
           Add




    Lo-Fi Animations
Hide me

Fill in:
Pickles       X



|                 Add doesn’t work at this point,
                  so you either nee...
simple   html/css/javascript


         + xml/json




     Prototypes                123
simple   html/css/javascript


         + xml/json




     Prototypes                123
Prototypes   124
simple   html/css/javascript


         + xml/json




     Prototypes                125
simple   html/css/javascript


         + xml/json




     Prototypes                125
Prototypes   126
simple    html/css/javascript


          + xml/json


functional backend


     Prototypes                 127
simple    html/css/javascript


          + xml/json


functional backend


     Prototypes                 127
the metric is
communication


                 128
Resources
The Non-Designer’s Design Book
by Robin Williams
About Face 2.0: The Essentials of Interaction Design
by Alan Co...
Upcoming SlideShare
Loading in …5
×

RWE2007-Practical Design for Developers

7,687 views
5,392 views

Published on

Published in: Technology, Business
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,687
On SlideShare
0
From Embeds
0
Number of Embeds
137
Actions
Shares
0
Downloads
0
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

RWE2007-Practical Design for Developers

  1. Practical Design for Ajax Development David Verba david@adaptivepath.com
  2. 2
  3. 2
  4. “We learn to describe the things we see, but we also see the things we can describe.” “Word Games” by David Womack, Print Magazine, October 2006. 3
  5. This Session Includes: A survey of design principles. A framework for understanding design practice Language for communicating clearly about design Resources for further learning 4
  6. 5
  7. is design the new black? 5
  8. 6
  9. visual interaction information service 6
  10. A Successful Product Depends On: The experience your users have and how well your product serves their needs. 7
  11. 8
  12. What about this one? 9
  13. Or this one? 10
  14. Prioritizing Users “traditional” bench “anti-homeless” bench Citizens Police Police City priority City Citizens Homeless Homeless
  15. What makes a bench successful? 12
  16. City’s Perspective Discourages homelessness “Good” citizens use them Reduced loitering, drug dealing, and petty crime 13
  17. Citizens’ Perspective Cleaner Welcoming A pleasant place to spend some time 14
  18. Are these benches successful? 15
  19. Is there another path? Sean Godsell’s Park Bench House 16
  20. Know Who Your Users Are You must know and design for all of your users. 17
  21. A Self-Assessment Tool for Teachers 18
  22. The original desktop app: 19
  23. option 1: literal translation 20
  24. option 2 old style: use “best practices” and your own experience 21
  25. A Teacher’s Day With children from 7:30am to 3:30pm. Often takes lunch with the children. Rarely has more than 5-10 minutes during the work day to do admin work. Might have a classroom computer. Do a lot of work on their home computers. 22 32
  26. option 3 design interface to support context of use and actual tasks 23
  27. option 3a use AJAX to improve interface responsiveness 24
  28. needs superintendent To know how well schools are performing /| principals To know how well teachers are performing To manage many teachers /| teachers To know their privacy is protected 25
  29. Understand Your Users know their... context motivations challenges 26
  30. The Elements of User Experience by Jesse James Garrett 27
  31. Concrete surface skeleton structure scope strategy Abstract 28
  32. surface Concrete What will the finished product look like? surface skeleton What components will enable people to use the site? skeleton structure How will the pieces of the site fit structure together? scope scope What features will the site need to include? strategy strategy Abstract What do we want to get out of the site? What do our users want? 29
  33. surface Concrete What will the finished product look like? surface skeleton What components will enable people to use the site? skeleton structure How will the pieces of the site fit structure together? scope scope What features will the site need to include? strategy strategy Abstract What do we want to get out of the site? What do our users want? 30
  34. surface Concrete What will the finished product look like? surface skeleton What components will enable people to use the site? skeleton structure How will the pieces of the site fit structure together? scope scope What features will the site need to include? strategy strategy Abstract What do we want to get out of the site? What do our users want? 31
  35. surface Concrete What will the finished product look like? surface skeleton What components will enable people to use the site? skeleton structure How will the pieces of the site fit structure together? scope scope What features will the site need to include? strategy strategy Abstract What do we want to get out of the site? What do our users want? 32
  36. surface Concrete What will the finished product look like? surface skeleton What components will enable people to use the site? skeleton structure How will the pieces of the site fit structure together? scope scope What features will the site need to include? strategy strategy Abstract What do we want to get out of the site? What do our users want? 33
  37. strategy Concrete surface What do we skeleton want to get out of the site? structure What do our scope users want? strategy Abstract 34
  38. Your Your User’s Goals Needs Strategic Sweet Spot: Where user needs and your goals meet. 35
  39. Your Your User’s Goals Needs Strategic Sweet Spot: Where user needs and your goals meet. 35
  40. Know Your Stakeholders 36
  41. Know Your Stakeholders A stakeholder is anyone who has an interest in the outcome of a project. 36
  42. Site Objectives: what do you want to achieve? 37
  43. Revenue Objectives Site Objectives: revenue objectives 38
  44. Site Objectives: operational improvements 39
  45. Your Users: identify all of them 40
  46. Jesse white male age 25-40 city-dweller computer professional married, no children income >100K 41
  47. Talk to your users 42
  48. 43
  49. Observing the User Experience by Mike Kuniavsky 44
  50. Evolving Strategy 45
  51. Evolving Strategy 45
  52. HIGH Snapfish Kodak Easyshare CVS LOW Uploading Storage Viewing Editing Sharing Printing 46
  53. HIGH Snapfish Kodak Easyshare CVS Flickr LOW Uploading Storage Viewing Editing Sharing Printing 46
  54. scope Concrete surface What features skeleton will the site need to include? structure scope strategy Abstract 47
  55. HIGH Snapfish Kodak Easyshare CVS Flickr LOW Uploading Storage Viewing Editing Sharing Printing 48
  56. Functional Specifications What the site must include. 49
  57. Don’t try to be everything to everybody. 50
  58. select core features fulfill enrich feature set expand move into new areas Implementation Plan Make a promise to your users and deliver on it. 51
  59. select core features fulfill enrich feature set expand move into new areas Implementation Plan Make a promise to your users and deliver on it. 51
  60. select core features fulfill enrich feature set expand move into new areas Implementation Plan Make a promise to your users and deliver on it. 51
  61. select core features fulfill enrich feature set expand move into new areas Implementation Plan Make a promise to your users and deliver on it. 51
  62. Your App Ecosystem of Applications (you don’t have to be everything to everybody) 52
  63. structure Concrete surface How will the skeleton pieces of the site fit together? structure scope strategy Abstract 53
  64. Interaction Design How the user moves from one step in a process to the next. 54
  65. Interaction Frameworks 55
  66. Interaction Frameworks 55
  67. Interaction Frameworks 56
  68. pages Interaction Frameworks 56
  69. Select label go! pop-ups pages Interaction Frameworks 56
  70. Select label go! Select label go! layers pop-ups pages Interaction Frameworks 56
  71. 58% 58% 58% 58% GO! Think Modularly 57
  72. About Face 2.0: The Essentials of Interaction Design by Alan Cooper & Robert Reimann 58
  73. Information Architecture How the user moves from one content element to the next. 59
  74. Granularity 60
  75. apple pear banana fruit Granularity 60
  76. apple apple pear pear banana banana fruit fruit Granularity 60
  77. apple apple fruit pear pear apple banana banana pear banana fruit fruit Granularity 60
  78. Labeling 61
  79. human resources Labeling 61
  80. human resources employment opportunities Labeling 61
  81. human resources employment opportunities jobs Labeling 61
  82. Consistency 62
  83. about us this company about who we are our company who are we? Consistency 62
  84. Information Architecture for Large- Scale Web Sites by Louis Rosenfeld and Peter Morville 63
  85. skeleton Concrete surface What skeleton components will enable people to use the site? structure scope strategy Abstract 64
  86. Make finding things easy discoverability Actions should be recoverability without cost A sense of time, place, context and meaning How the system feedback responds Four Principles of Interaction Design 65
  87. Discoverability Make finding things easy 66
  88. from icq.com 67
  89. from .com 68
  90. from yahoo.com 69
  91. from oldnavy.com 70
  92. from farecast.com 71
  93. Recoverability Actions should be without cost 72
  94. 73 from blogger.com
  95. from travelocity.com 74
  96. from farecast.com 75
  97. from farecast.com 75
  98. from farecast.com 75
  99. from travelocity.com 76
  100. from farecast.com 77
  101. from google.com 78
  102. from amazon.com 79
  103. from Measure Map 80
  104. Context A sense of time, place, and meaning 81
  105. from amazon.com 82
  106. from gap.com 83
  107. from gap.com 84
  108. from gap.com 85
  109. from blogger.com 86
  110. Feedback How the system responds 87
  111. Provide Clear Error Messages for Users 88
  112. Provide Clear Error Messages for Users 88
  113. from basecamphq.com 89
  114. from napyfab.com 90
  115. The job requires extra pluck graphic The five boxing wizards jump front tab back tab back tab heading dropdown text field text field Pack my box $12.73 text field Back in June $56.47 The job requires extra pluck and zeal from every young graphic The job $128.75 wage earner. The five boxing wizards jump quickly. Six big Five boxing $19.21 heading juicy steaks sizzled in a pan as five workmen left the Six big steaks $44.19 quarry. Five wine experts jokingly quizzed sample chablis. • Pack my box with five label Total $991.31 dozen liquor jugs. • Back in June we button delivered oxygen heading button • The job requires extra pluck and zeal • The five boxing wizards dropdown document output cycle effective jump quickly. • Six big juicy steaks document 04/15/05 04/15/05 04/15/05 address graphic sizzled in a pan document 04/15/05 04/15/05 04/15/05 city Six big juicy steaks Pack my box with five document 04/15/05 04/15/05 04/15/05 sizzled in a pan as five state zip dozen liquor jugs. workmen left the quarry. document 04/15/05 04/15/05 04/15/05 Back in June we Five wine experts selected checkbox delivered oxygen jokingly quizzed sample document 04/15/05 04/15/05 04/15/05 equipment chablis. label selected list box item document 04/15/05 04/15/05 04/15/05 label highlighted item unselected front tab back tab unselected radio document 04/15/05 04/15/05 04/15/05 list box item selected radio document 04/15/05 04/15/05 04/15/05 list box item dropdown list box item unselected radio highlighted item dropdown list box item list box item label label dropdown dropdown collapsed button selected radio button selected radio button button selected checkbox unselected radio button button unselected radio button button Action at a Distance 91
  116. The job requires extra pluck graphic The five boxing wizards jump front tab back tab back tab heading dropdown text field text field Pack my box $12.73 text field Back in June $56.47 The job requires extra pluck and zeal from every young graphic The job $128.75 wage earner. The five boxing wizards jump quickly. Six big Five boxing $19.21 heading juicy steaks sizzled in a pan as five workmen left the Six big steaks $44.19 quarry. Five wine experts jokingly quizzed sample chablis. • Pack my box with five label Total $991.31 dozen liquor jugs. • Back in June we button delivered oxygen heading button • The job requires extra pluck and zeal • The five boxing wizards dropdown document output cycle effective jump quickly. • Six big juicy steaks document 04/15/05 04/15/05 04/15/05 address graphic sizzled in a pan document 04/15/05 04/15/05 04/15/05 city Six big juicy steaks Pack my box with five document 04/15/05 04/15/05 04/15/05 sizzled in a pan as five state zip dozen liquor jugs. workmen left the quarry. document 04/15/05 04/15/05 04/15/05 Back in June we Five wine experts selected checkbox delivered oxygen jokingly quizzed sample document 04/15/05 04/15/05 04/15/05 equipment chablis. label selected list box item document 04/15/05 04/15/05 04/15/05 label highlighted item unselected front tab back tab unselected radio document 04/15/05 04/15/05 04/15/05 list box item selected radio document 04/15/05 04/15/05 04/15/05 list box item dropdown list box item unselected radio highlighted item dropdown list box item list box item label label dropdown dropdown collapsed button selected radio button selected radio button button selected checkbox unselected radio button button unselected radio button button Action at a Distance 91
  117. The job requires extra pluck graphic The five boxing wizards jump front tab back tab back tab heading dropdown text field text field Pack my box $12.73 text field Back in June $56.47 The job requires extra pluck and zeal from every young graphic The job $128.75 wage earner. The five boxing wizards jump quickly. Six big Five boxing $19.21 heading juicy steaks sizzled in a pan as five workmen left the Six big steaks $44.19 quarry. Five wine experts jokingly quizzed sample chablis. • Pack my box with five label Total $991.31 dozen liquor jugs. • Back in June we button delivered oxygen heading button • The job requires extra pluck and zeal • The five boxing wizards dropdown document output cycle effective jump quickly. • Six big juicy steaks document 04/15/05 04/15/05 04/15/05 address graphic sizzled in a pan document 04/15/05 04/15/05 04/15/05 city Six big juicy steaks Pack my box with five document 04/15/05 04/15/05 04/15/05 sizzled in a pan as five state zip dozen liquor jugs. workmen left the quarry. document 04/15/05 04/15/05 04/15/05 Back in June we Five wine experts selected checkbox delivered oxygen jokingly quizzed sample document 04/15/05 04/15/05 04/15/05 equipment chablis. label selected list box item document 04/15/05 04/15/05 04/15/05 label highlighted item unselected front tab back tab unselected radio document 04/15/05 04/15/05 04/15/05 list box item selected radio document 04/15/05 04/15/05 04/15/05 list box item dropdown list box item unselected radio highlighted item dropdown list box item list box item label label dropdown dropdown collapsed button selected radio button selected radio button button selected checkbox unselected radio button button unselected radio button button Action at a Distance 91
  118. The job requires extra pluck graphic The five boxing wizards jump front tab back tab back tab heading dropdown text field text field Pack my box $12.73 text field Back in June $56.47 The job requires extra pluck and zeal from every young graphic The job $128.75 wage earner. The five boxing wizards jump quickly. Six big Five boxing $19.21 heading juicy steaks sizzled in a pan as five workmen left the Six big steaks $44.19 quarry. Five wine experts jokingly quizzed sample chablis. • Pack my box with five label Total $991.31 dozen liquor jugs. • Back in June we button delivered oxygen heading button • The job requires extra pluck and zeal • The five boxing wizards dropdown document output cycle effective jump quickly. • Six big juicy steaks document 04/15/05 04/15/05 04/15/05 address graphic sizzled in a pan document 04/15/05 04/15/05 04/15/05 city Six big juicy steaks Pack my box with five document 04/15/05 04/15/05 04/15/05 sizzled in a pan as five state zip dozen liquor jugs. workmen left the quarry. document 04/15/05 04/15/05 04/15/05 Back in June we Five wine experts selected checkbox delivered oxygen jokingly quizzed sample document 04/15/05 04/15/05 04/15/05 equipment chablis. label selected list box item document 04/15/05 04/15/05 04/15/05 label highlighted item unselected front tab back tab unselected radio document 04/15/05 04/15/05 04/15/05 list box item selected radio document 04/15/05 04/15/05 04/15/05 list box item dropdown list box item unselected radio highlighted item dropdown list box item list box item label label dropdown dropdown collapsed button selected radio button selected radio button button selected checkbox unselected radio button button unselected radio button button Action at a Distance 91
  119. The job requires extra pluck graphic The five boxing wizards jump front tab back tab back tab heading dropdown text field text field Pack my box $12.73 text field Back in June $56.47 The job requires extra pluck and zeal from every young graphic The job $128.75 wage earner. The five boxing wizards jump quickly. Six big Five boxing $19.21 heading juicy steaks sizzled in a pan as five workmen left the Six big steaks $44.19 quarry. Five wine experts jokingly quizzed sample chablis. • Pack my box with five label Total $991.31 dozen liquor jugs. • Back in June we button delivered oxygen heading button • The job requires extra pluck and zeal • The five boxing wizards dropdown document output cycle effective jump quickly. • Six big juicy steaks document 04/15/05 04/15/05 04/15/05 address graphic sizzled in a pan document 04/15/05 04/15/05 04/15/05 city Six big juicy steaks Pack my box with five document 04/15/05 04/15/05 04/15/05 sizzled in a pan as five state zip dozen liquor jugs. workmen left the quarry. document 04/15/05 04/15/05 04/15/05 Back in June we Five wine experts selected checkbox delivered oxygen jokingly quizzed sample document 04/15/05 04/15/05 04/15/05 equipment chablis. label selected list box item document 04/15/05 04/15/05 04/15/05 label highlighted item unselected front tab back tab unselected radio document 04/15/05 04/15/05 04/15/05 list box item selected radio document 04/15/05 04/15/05 04/15/05 list box item dropdown list box item unselected radio highlighted item dropdown list box item list box item label label dropdown dropdown collapsed button selected radio button selected radio button button selected checkbox unselected radio button button unselected radio button button Action at a Distance 91
  120. surface Concrete surface What will the skeleton finished product look like? structure scope strategy Abstract 92
  121. Design is not just cosmetic. 93
  122. also Design is not just cosmetic. 93
  123. The Attractiveness Bias* ruthlessly stolen from “Universal Principles of Design” by Lidwell, Holden, and Butler 94
  124. 95
  125. 96
  126. “Even if a website is highly usable and provides very useful information presented in a logical arrangement, it may fail to impress a user whose first impression of the site was negative.” Dr. Gitte Lindgaard, Carleton University 108 97
  127. who do you trust? 98
  128. Personality 99
  129. what do each of these say to you? 100
  130. Visual Design 101
  131. The Non- Designer’s Design Book by Robin Williams 102 23
  132. CRAP c contrast r repetition a alignment p proximity 103
  133. CRAP c contrast r repetition a alignment p proximity 103
  134. CRAP c contrast r repetition a alignment p proximity 103
  135. CRAP c contrast r repetition a alignment p proximity 103
  136. CRAP c contrast r repetition a alignment p proximity 103
  137. contrast Rich Web Experience repetition San Jose, CA alignment September 6-8, 2007 www.therichwebexperience.com proximity 104
  138. contrast Rich Web Experience repetition San Jose, CA alignment September 6-8, 2007 www.therichwebexperience.com proximity 105
  139. contrast Rich Web Experience repetition September 6-8, 2007 | San Jose, CA alignment www.therichwebexperience.com proximity 106 97
  140. contrast repetition Rich Web Experience September 6-8, 2007 | San Jose, CA alignment www.therichwebexperience.com proximity 107
  141. contrast repetition Rich Web Experience September 6-8, 2007 | San Jose, CA alignment www.therichwebexperience.com proximity 108
  142. Visual Design Even simple improvements make a huge difference. 109
  143. Documentation 110
  144. Functional Annotations 1 Login 2 user name 4 Links to Home on subsequent pages. 1 Logo branding space password Login Module. Submit either takes to secure 2 4 banking application or to a resubmit page if Forgot my password Begin Try Apply there is an error. Submit Short description of our Teaser. Reasons to Why bank? products and services choose New Bank here. Learn the basics about here. Short description of Button links to account application page. Compare us to other 3 banking. 5 our products and services brokers. Check out our Need help? Contact Us here. More >> favorable rates and fees. Why New Bank? Links to Forgotten Password page. etc. Reasons to choose New 4 2 Today's Rates Bank here. Compare us to bullet point other banks. Check out our Product 1 1 Links to Contact Us page. Brief description of 5 bullet point favorable rates and fees. product here bullet point etc. More >> bullet point Demo Product 2 3 Brief description of Rate Table product 2 here More >> Apply Now Demo Content Annotations Copyr 1 3 Dynamic Rate Table. Space Products and services text can be modular, to About New Bank - Customer Service - Pressroom 4 2 promo be swapped in and out. Thumbnail graphics can illustrate products. Legal and Disclosure Notices - Privacy Policy - Customer Agreement Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod 3 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate Key Issues velitesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id Functional 1 None estlaborum Reference Content 1 Reference Lorum ipsum Static Text Wireframes Lorum ipsum Linked Text Lorum ipsum Dynamic Text Conditional Include include Interaction Designer: Dan Saffer 111
  145. “Wireframing AJAX is a [expletive]... We have to determine all the things a user might do, and wireframe the blessed moments of each possibility.” Jeffrey Zeldman, Web 3.0 112
  146. Storyboards 113
  147. Mouse Drag Over Drag Over Hover Mouse Down Drag Initiated Valid Target Invalid Target Cursor CSS Move cursor Move cursor CSS CSS Move cursor CSS Move cursor CSS Move cursor Tool Tip Drag Object Full Opacity Reduced Opacity Reduced Opacity Reduced Opacity & Invalid Badge Drop Target Frame-by-Frames No insertion bar, just a gap No insertion bar, just a gap Insertion bar showing where it will drop No insertion bar, just a gap 114
  148. branding & navigation Participant Interface Notes register Title: Register page Date: 18 July 2005 All we really need is a unique name and email, everything after that is Version: 1.0 gravy. Lorem ipsum dolor sit amet, nulla at fermentum nonummy Functional Notes: turpis mauris rutrum justo, nec. Cras malesuada, nulla at fermentum The registration page allows users to signup for Participate simply by entering a user name and a valid email address. nonummy. create a username: a alternate names Provide the user with some notification of what the email a friend 1 a When user completes name entry and clicks to action is worth in Participant points to encourage follow-through enter your email: email entry, compare the entered name to previously and introduce non-registered users in the Incentive program. b claimed names on the site. If the name is a match, email error generate alternates that can be clicked on to fill the On click, commit the user's entered email addresses and 2 message, send to target addresses, and link user to a entry field. confirmation page hot posts 1 For users who have invited friends over email, provide reporting The name ryan_c is unavailable. 3 on # invited and # accepted. Hide actual names by default, but How about: Instruction text lorem ipsum dolor sit amet, consectetuer adipiscing elit. allow users to view them by clicking the quot;viewquot; link ryan_c_01 archive > Tuesday, July 19, 2005 iam_ryanc written by: authorname tag: campaign ryan_c_isme Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras malesuada, nulla at fermentum nonummy, turpis mauris rutrum justo, nec molestie dolor eros porttitor lorem. Proin pharetra wisi eu tortor. Vivamus cursus tortor id User makes selection or inputs new name purus. Suspendisse potenti. Ut dui. Vestibulum tincidunt. that is valid & available: comment on this post | more by this author | permalink That name works. Thanks! 2 written by: authorname tag: film Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras malesuada, nulla at fermentum nonummy, turpis mauris rutrum justo, nec molestie dolor eros porttitor lorem. Proin pharetra wisi eu tortor. Vivamus cursus tortor id purus. Suspendisse potenti. Ut dui. Vestibulum tincidunt. b Is it possible to treat the quot;submitquot; button click as a comment on this post | more by this author | permalink call to validate the form of the user's entered email? If there are any formating errors, alert the user and Monday, July 18, 2005 prevent the page from loading the confirmation. written by: authorname tag: campaign The address you entered isn't formatted properly. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras malesuada, nulla at fermentum nonummy, turpis mauris rutrum justo, nec molestie dolor eros porttitor lorem. Proin pharetra wisi eu tortor. Vivamus cursus tortor id purus. Suspendisse potenti. Ut dui. Vestibulum tincidunt. comment on this post | more by this author | permalink archive > 3 Sign me up for the mailing list submit > footer Wireframes with Key Frames 106 107 115
  149. branding & navigation Participant Interface Notes register Title: Register page Date: 18 July 2005 All we really need is a unique name and email, everything after that is Version: 1.0 gravy. Lorem ipsum dolor sit amet, nulla at fermentum nonummy Functional Notes: turpis mauris rutrum justo, nec. Cras malesuada, nulla at fermentum The registration page allows users to signup for Participate simply by entering a user name and a valid email address. nonummy. create a username: a alternate names Provide the user with some notification of what the email a friend 1 a When user completes name entry and clicks to action is worth in Participant points to encourage follow-through enter your email: email entry, compare the entered name to previously and introduce non-registered users in the Incentive program. b claimed names on the site. If the name is a match, email error generate alternates that can be clicked on to fill the On click, commit the user's entered email addresses and 2 message, send to target addresses, and link user to a entry field. confirmation page hot posts 1 For users who have invited friends over email, provide reporting The name ryan_c is unavailable. 3 on # invited and # accepted. Hide actual names by default, but How about: Instruction text lorem ipsum dolor sit amet, consectetuer adipiscing elit. allow users to view them by clicking the quot;viewquot; link ryan_c_01 archive > Tuesday, July 19, 2005 iam_ryanc written by: authorname tag: campaign ryan_c_isme Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras malesuada, nulla at fermentum nonummy, turpis mauris rutrum justo, nec molestie dolor eros porttitor lorem. Proin pharetra wisi eu tortor. Vivamus cursus tortor id User makes selection or inputs new name purus. Suspendisse potenti. Ut dui. Vestibulum tincidunt. that is valid & available: comment on this post | more by this author | permalink That name works. Thanks! 2 written by: authorname tag: film Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras malesuada, nulla at fermentum nonummy, turpis mauris rutrum justo, nec molestie dolor eros porttitor lorem. Proin pharetra wisi eu tortor. Vivamus cursus tortor id purus. Suspendisse potenti. Ut dui. Vestibulum tincidunt. b Is it possible to treat the quot;submitquot; button click as a comment on this post | more by this author | permalink call to validate the form of the user's entered email? If there are any formating errors, alert the user and Monday, July 18, 2005 prevent the page from loading the confirmation. written by: authorname tag: campaign The address you entered isn't formatted properly. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras malesuada, nulla at fermentum nonummy, turpis mauris rutrum justo, nec molestie dolor eros porttitor lorem. Proin pharetra wisi eu tortor. Vivamus cursus tortor id purus. Suspendisse potenti. Ut dui. Vestibulum tincidunt. comment on this post | more by this author | permalink archive > 3 Sign me up for the mailing list submit > footer Wireframes with Key Frames 106 107 115
  150. Wireframes with Key Frames 116
  151. Show me Lo-Fi Animations
  152. Hide me Fill in: | Add Lo-Fi Animations
  153. Hide me Fill in: Pickles| Add Lo-Fi Animations
  154. Hide me Fill in: Pickles| Add Lo-Fi Animations
  155. Hide me Fill in: Pickles| Add Lo-Fi Animations
  156. Hide me Fill in: Pickles X | Add Lo-Fi Animations
  157. Hide me Fill in: Pickles X | Add Lo-Fi Animations
  158. Hide me Fill in: Pickles X | Add doesn’t work at this point, so you either need to hide the control or delete (x) the Pickles Add Lo-Fi Animations
  159. simple html/css/javascript + xml/json Prototypes 123
  160. simple html/css/javascript + xml/json Prototypes 123
  161. Prototypes 124
  162. simple html/css/javascript + xml/json Prototypes 125
  163. simple html/css/javascript + xml/json Prototypes 125
  164. Prototypes 126
  165. simple html/css/javascript + xml/json functional backend Prototypes 127
  166. simple html/css/javascript + xml/json functional backend Prototypes 127
  167. the metric is communication 128
  168. Resources The Non-Designer’s Design Book by Robin Williams About Face 2.0: The Essentials of Interaction Design by Alan Cooper Information Architecture for the World Wide Web by Louis Rosenfeld and Peter Morville Observing the User Experience by Mike Kuniavsky The Elements of User Experience by Jesse James Garrett David Verba | Dir. of Technology http://www.adaptivepath.com/slides/rwe2007.pdf Adaptive Path david@adaptivepath.com 129

×