SlideShare a Scribd company logo
1 of 168
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 Magazine, October 2006.




                                                              3
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
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.



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




           “traditional” bench     “anti-homeless” bench
             Citizens                Police
             Police                  City
priority




             City                    Citizens
             Homeless                Homeless
What makes a bench
   successful?




                     12
City’s Perspective
Discourages homelessness

“Good” citizens use them

Reduced loitering, drug dealing, and petty crime


                                                   13
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 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
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 performing
                 To manage many teachers


     /|
   teachers      To know their privacy is protected




                                                            25
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?
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
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
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
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
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
strategy                      Concrete



                  surface

What do we
                  skeleton
want to get out
of the site?
                  structure


What do our        scope
users want?
                  strategy    Abstract




                                         34
Your
   Your
                         User’s
   Goals
                         Needs



Strategic Sweet Spot:
Where user needs and your goals meet.   35
Your
   Your
                         User’s
   Goals
                         Needs



Strategic Sweet Spot:
Where user needs and your goals meet.   35
Know Your Stakeholders




                         36
Know Your Stakeholders

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

                                        36
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


                                                                      Kodak
                                                                      Easyshare


                                                                      CVS



LOW


       Uploading   Storage   Viewing   Editing   Sharing   Printing




                                                                                  46
HIGH                                                                  Snapfish


                                                                      Kodak
                                                                      Easyshare


                                                                      CVS


                                                                      Flickr
LOW


       Uploading   Storage   Viewing   Editing   Sharing   Printing




                                                                                  46
scope                            Concrete



                     surface

What features
                     skeleton
will the site need
to include?
                     structure


                      scope


                     strategy    Abstract




                                            47
HIGH                                                                  Snapfish


                                                                      Kodak
                                                                      Easyshare


                                                                      CVS


                                                                      Flickr
LOW


       Uploading   Storage   Viewing   Editing   Sharing   Printing




                                                                                  48
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


    Implementation Plan
Make a promise to your users and deliver on it.   51
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
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
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
Your App



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



                     surface

How will the
                     skeleton
pieces of the site
fit together?
                     structure


                      scope


                     strategy    Abstract




                                            53
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
                                 56
Select
  label

                   go!


                                         Select
                                 label

                                                  go!




                                         layers
pop-ups

                         pages




Interaction Frameworks
                                                        56
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
           fruit




         Granularity
                                60
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
                             62
Information
Architecture
for Large-
Scale Web
Sites
by Louis
Rosenfeld and
Peter Morville


                 63
skeleton                       Concrete



                   surface

What
                   skeleton
components will
enable people to
use the site?      structure


                    scope


                   strategy    Abstract




                                          64
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
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 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
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
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
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
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
surface                        Concrete



                   surface

What will the
                   skeleton
finished product
look like?
                   structure


                    scope


                   strategy    Abstract




                                          92
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
                                                                                           94
95
96
“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
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

             www.therichwebexperience.com
proximity
                                       104
contrast
             Rich Web Experience
repetition            San Jose, CA



alignment       September 6-8, 2007


              www.therichwebexperience.com


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




alignment
                   www.therichwebexperience.com


proximity
                                                  106
                                                   97
contrast
repetition
             Rich Web Experience
             September 6-8, 2007 | San Jose, CA

alignment           www.therichwebexperience.com




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

alignment           www.therichwebexperience.com




proximity
                                                   108
Visual Design


Even simple improvements
 make a huge difference.

                           109
Documentation
                110
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
“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
Storyboards   113
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
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
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
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 need to hide the
                  control or delete (x) the Pickles
           Add




    Lo-Fi Animations
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 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

More Related Content

Similar to RWE2007-Practical Design for Developers

Intro Design System for Visual Designers
Intro Design System for Visual DesignersIntro Design System for Visual Designers
Intro Design System for Visual DesignersInyoung Choi
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User InterfacesFreerange Future
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User InterfacesKieran Wallis
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User InterfacesKieran Wallis
 
3 steps for building design eco-systems of future, today. - Samir Dash
3 steps for building  design eco-systems of future, today. - Samir Dash3 steps for building  design eco-systems of future, today. - Samir Dash
3 steps for building design eco-systems of future, today. - Samir DashDesignOps Global Conference
 
[DesignOps Global Conference 2019] Samir Dash - 3-steps for building design e...
[DesignOps Global Conference 2019] Samir Dash - 3-steps for buildingdesign e...[DesignOps Global Conference 2019] Samir Dash - 3-steps for buildingdesign e...
[DesignOps Global Conference 2019] Samir Dash - 3-steps for building design e...Samir Dash
 
User Experience Best Practices
User Experience Best PracticesUser Experience Best Practices
User Experience Best PracticesNick Finck
 
Design Processes and Systems in Craft
Design Processes and Systems in CraftDesign Processes and Systems in Craft
Design Processes and Systems in CraftCourtney Bradford
 
Week 2 - Purpose of a website
Week 2 - Purpose of a websiteWeek 2 - Purpose of a website
Week 2 - Purpose of a websiteGraeme Smith
 
User Centered Design Overview
User Centered Design OverviewUser Centered Design Overview
User Centered Design OverviewAaron Hursman
 
Purpose Before Action: Why You Need a Design Language System
Purpose Before Action: Why You Need a Design Language SystemPurpose Before Action: Why You Need a Design Language System
Purpose Before Action: Why You Need a Design Language Systemcreckling
 
Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
Do Try This At Home  Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...Do Try This At Home  Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...jward5519
 
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and LayoutGames Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and LayoutDavid Farrell
 
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In BanglaWeb Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In BanglaStack Learner
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?Diego Eis
 
Flow: A living full-stack framework for the web
Flow: A living full-stack framework for the webFlow: A living full-stack framework for the web
Flow: A living full-stack framework for the websebastian sastre
 
Purpose Before Action: Why you need a Design Language System
Purpose Before Action: Why you need a Design Language SystemPurpose Before Action: Why you need a Design Language System
Purpose Before Action: Why you need a Design Language SystemUXPA Boston
 
Baltimore SharePoint User's Group - 21 May 2009
Baltimore SharePoint User's Group - 21 May 2009Baltimore SharePoint User's Group - 21 May 2009
Baltimore SharePoint User's Group - 21 May 2009Dan Usher
 

Similar to RWE2007-Practical Design for Developers (20)

Intro Design System for Visual Designers
Intro Design System for Visual DesignersIntro Design System for Visual Designers
Intro Design System for Visual Designers
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
 
3 steps for building design eco-systems of future, today. - Samir Dash
3 steps for building  design eco-systems of future, today. - Samir Dash3 steps for building  design eco-systems of future, today. - Samir Dash
3 steps for building design eco-systems of future, today. - Samir Dash
 
[DesignOps Global Conference 2019] Samir Dash - 3-steps for building design e...
[DesignOps Global Conference 2019] Samir Dash - 3-steps for buildingdesign e...[DesignOps Global Conference 2019] Samir Dash - 3-steps for buildingdesign e...
[DesignOps Global Conference 2019] Samir Dash - 3-steps for building design e...
 
User Experience Best Practices
User Experience Best PracticesUser Experience Best Practices
User Experience Best Practices
 
Design Processes and Systems in Craft
Design Processes and Systems in CraftDesign Processes and Systems in Craft
Design Processes and Systems in Craft
 
Week 2 - Purpose of a website
Week 2 - Purpose of a websiteWeek 2 - Purpose of a website
Week 2 - Purpose of a website
 
User Centered Design Overview
User Centered Design OverviewUser Centered Design Overview
User Centered Design Overview
 
Purpose Before Action: Why You Need a Design Language System
Purpose Before Action: Why You Need a Design Language SystemPurpose Before Action: Why You Need a Design Language System
Purpose Before Action: Why You Need a Design Language System
 
Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
Do Try This At Home  Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...Do Try This At Home  Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
 
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and LayoutGames Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
 
EBI Web redesign meeting
EBI Web redesign meetingEBI Web redesign meeting
EBI Web redesign meeting
 
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In BanglaWeb Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
 
Flow: A living full-stack framework for the web
Flow: A living full-stack framework for the webFlow: A living full-stack framework for the web
Flow: A living full-stack framework for the web
 
Purpose Before Action: Why you need a Design Language System
Purpose Before Action: Why you need a Design Language SystemPurpose Before Action: Why you need a Design Language System
Purpose Before Action: Why you need a Design Language System
 
Baltimore SharePoint User's Group - 21 May 2009
Baltimore SharePoint User's Group - 21 May 2009Baltimore SharePoint User's Group - 21 May 2009
Baltimore SharePoint User's Group - 21 May 2009
 
The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
 

Recently uploaded

Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?Rustici Software
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementDianaGray10
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfHCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfROWELL MARQUINA
 
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2DianaGray10
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024BookNet Canada
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationBuild Intuit
 
Arti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfArti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfwill854175
 
The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...stockholm university
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Introduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxIntroduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxmprakaash5
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionDEEPRAJ PATHAK
 
Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+Antonio de Llamas
 
full stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdffull stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdfHulkTheDevil
 

Recently uploaded (20)

Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions management
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfHCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
 
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientation
 
BoSEU24 | Bill Thompson | Talk From Another Century
BoSEU24 | Bill Thompson | Talk From Another CenturyBoSEU24 | Bill Thompson | Talk From Another Century
BoSEU24 | Bill Thompson | Talk From Another Century
 
Arti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfArti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdf
 
The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Introduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxIntroduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptx
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile Evolution
 
Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+
 
full stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdffull stack practical assignment msc cs.pdf
full stack practical assignment msc cs.pdf
 

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
  • 8. 6
  • 10. A Successful Product Depends On: The experience your users have and how well your product serves their needs. 7
  • 11. 8
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 104. Context A sense of time, place, and meaning 81
  • 110. Feedback How the system responds 87
  • 111. Provide Clear Error Messages for Users 88
  • 112. Provide Clear Error Messages for Users 88
  • 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
  • 129. what do each of these say to you? 100
  • 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
  • 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
  • 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
  • 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