O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Practical Design for Ajax
Development


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

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

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



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




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




                     12
City’s Perspective
Discourages homelessness

“Good” citizens use them

Reduced loitering, drug dealing, and petty crime


...
Citizens’ Perspective
Cleaner

Welcoming

A pleasant place to spend some time


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


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



You must know and design
   for all of your users.

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




                            19
option 1: literal translation




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




                    24
needs
superintendent   To know how well schools are performing



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

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




                 27
Concrete



surface


skeleton


structure


 scope


strategy    Abstract




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



                  surface

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



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



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




                         36
Know Your Stakeholders

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

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


                               37
Revenue
   Objectives



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


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




             44
Evolving Strategy
                    45
Evolving Strategy
                    45
HIGH                                                                  Snapfish


                                         ...
HIGH                                                                  Snapfish


                                         ...
scope                            Concrete



                     surface

What features
                     skeleton
wil...
HIGH                                                                  Snapfish


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

    fulfill        enrich feature set

 expand            move into new areas


    Impleme...
select          core features

    fulfill        enrich feature set

 expand            move into new areas


    Impleme...
select          core features

    fulfill        enrich feature set

 expand            move into new areas


    Impleme...
select          core features

    fulfill        enrich feature set

 expand            move into new areas


    Impleme...
Your App



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



                     surface

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

                    54
Interaction Frameworks
                         55
Interaction Frameworks
                         55
Interaction Frameworks
                         56
pages




Interaction Frameworks
                         56
Select
  label

                   go!




pop-ups

                         pages




Interaction Frameworks
            ...
Select
  label

                   go!


                                         Select
                                 ...
58%




58%            58%




              58%
                    GO!




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



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

                  59
Granularity
              60
apple
pear
banana
fruit




         Granularity
                       60
apple      apple
pear       pear
banana     banana
fruit
           fruit




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




  Labeling
                  61
human resources

employment opportunities




      Labeling
                           61
human resources

employment opportunities

         jobs

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



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


                 63
skeleton                       Concrete



                   surface

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



                   surface

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



                               93
also
Design is not just cosmetic.



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




              102
               23
CRAP

c    contrast
r    repetition
a    alignment
p    proximity
                  103
CRAP

c    contrast
r    repetition
a    alignment
p    proximity
                  103
CRAP

c    contrast
r    repetition
a    alignment
p    proximity
                  103
CRAP

c    contrast
r    repetition
a    alignment
p    proximity
                  103
CRAP

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

repetition           San Jose, CA

alignment        September 6-8, 2007

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



alignment       September 6-8, 2007


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




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

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

alignment           ...
Visual Design


Even simple improvements
 make a huge difference.

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

                                                                       ...
branding & navigation
Participant Interface Notes

                                                                       ...
Wireframes with Key Frames
                         116
Show me




Lo-Fi Animations
Hide me

Fill in:
|
           Add




    Lo-Fi Animations
Hide me

Fill in:
Pickles|
           Add




 Lo-Fi Animations
Hide me

Fill in:
Pickles|
           Add




 Lo-Fi Animations
Hide me

Fill in:
Pickles|
           Add




 Lo-Fi Animations
Hide me

Fill in:
Pickles       X



|
           Add




    Lo-Fi Animations
Hide me

Fill in:
Pickles       X



|
           Add




    Lo-Fi Animations
Hide me

Fill in:
Pickles       X



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


         + xml/json




     Prototypes                123
simple   html/css/javascript


         + xml/json




     Prototypes                123
Prototypes   124
simple   html/css/javascript


         + xml/json




     Prototypes                125
simple   html/css/javascript


         + xml/json




     Prototypes                125
Prototypes   126
simple    html/css/javascript


          + xml/json


functional backend


     Prototypes                 127
simple    html/css/javascript


          + xml/json


functional backend


     Prototypes                 127
the metric is
communication


                 128
Resources
The Non-Designer’s Design Book
by Robin Williams
About Face 2.0: The Essentials of Interaction Design
by Alan Co...
Próximos SlideShares
Carregando em…5
×
10.515 visualizações

Publicada em

from amazon.com 79

Publicada em: Tecnologia, Negócios
  • Seja o primeiro a comentar

×