Designing User Interfaces

Page 1

0ATTERNS FOR %FFECTIVE )NTERACTION $ESIGN

$ESIGNING )NTERFACES

*ENIFER 4IDWELL Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


= @ 5 / < 7 H 7 < 5 B 6 3 >/ 5 3 ( , !9 / 5 4 / & 0 ! ' % % , % - % . 4 3

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


0AGE LAYOUT IS THE ART OF MANIPULATING THE USER S ATTENTION ON A PAGE TO CONVEY MEANING SEQUENCE AND POINTS OF INTERACTION 7T bVS e]`R µ[O\W^cZObW\U¶ a]c\Ra c\aSS[Zg b] g]c bVW\Y OP]cb Wb bVWa eOg 4WZ[ O\R bSZSdWaW]\ RW`SQb]`a [OYS bVSW` ZWdW\U Pg [O\W^cZObW\U g]c` ObbS\bW]\ ]\ bVS []dWS ]` BD aQ`SS\ O\R g]c O`S ^`Sac[OPZg O eWZZW\U ^O`bWQW^O\b :WYSeWaS T]` SRWb]`a eV] O``O\US O`bWQZSa VSORZW\Sa O\R ORa ]\ O \Sea^O^S` 7T OZZ bVWa Q]\bS\b eS`S ^`SaS\bSR W\ O R`OP []\]b]\S eWbV \] U`O^VWQ S[^VOaWa b] U`OP O\R []dS g]c` ObbS\ bW]\ g]c e]cZR OQbcOZZg ¿\R Wb VO`RS` b] Sfb`OQb [SO\W\U´eVOb¸a ac^^]aSR b] PS W[^]`bO\b O\R eVOb¸a \]b3dS\ bV]cUV Wb Wa cZbW[ObSZg O\ O`b bVS`S [WUVb PS []`S `ObW]\OZWbg b] U]]R ^OUS ZOg]cb bVO\ g]c bVW\Y A][S W[^]`bO\b WRSOa T`][ U`O^VWQ RSaWU\ O`S Sf^ZOW\SR W\ bVWa QVO^bS` W\b`]RcQbW]\) SOQV QO\ UcWRS g]c W\ bVS ZOg]cb ]T ^OUSa aQ`SS\a O\R RWOZ]U P]fSa ES¸ZZ bOZY OP]cb dWacOZ VWS`O`QVg dWacOZ À]e O\R T]QOZ ^]W\ba O\R U`]c^W\U O\R OZWU\[S\b´OZZ O`S ^`SRWQbOPZS O\R `ObW]\OZ O^^`]OQVSa b] ^OUS RSaWU\ BVWa QVO^bS`¸a ^ObbS`\a RSaQ`WPS Q]\Q`SbS eOga b] O^^Zg bV]aS VWUV ZSdSZ Q]\QS^ba b] W\bS`TOQS RSaWU\ 0cb bVS QVO\USOPZS W\bS`OQbWdS \Obc`S ]T Q][^cbS` RWa^ZOga [OYSa ZOg]cb SOaWS` W\ a][S eOga VO`RS` W\ ]bVS`a ES¸ZZ bOZY OP]cb eVg bVOb¸a b`cS A][S ]T bVSaS ^ObbS`\a e]`Y Oa eSZZ W\ ^`W\b Oa bVSg R] ]\aQ`SS\ Pcb []ab ]T bVS[ e]cZR PS caSZSaa W\ ^`W\b PSQOcaS bVSg ^`Sac[S bVOb bVS caS` eWZZ W\bS`OQb eWbV bVS ^OUS 4( % "! 3 ) #3 / & 0!' % ,!9/ 5 4 BVWa aSQbW]\ RWaQcaaSa ¿dS [OX]` SZS[S\ba ]T ^OUS ZOg]cb( dWacOZ VWS`O`QVg dWacOZ À]e U`]c^W\U O\R OZWU\[S\b V]e b] ^cb bVSaS bV`SS SZS[S\ba b]USbVS` O\R V]e b] caS Rg\O[WQ RWa^ZOga D 7 A C / : 6 7 3 @ / @ 1 6 G ( E 6 /B ¸ A 7 ; > = @ B/ < B -

BVS Q]\QS^b ]T dWacOZ VWS`O`QVg ^ZOga O ^O`b W\ OZZ T]`[a ]T U`O^VWQ RSaWU\ >cb aW[^Zg bVS []ab W[^]`bO\b Q]\bS\b aV]cZR abO\R ]cb bVS []ab O\R bVS ZSOab W[^]`bO\b aV]cZR abO\R ]cb bVS ZSOab BWbZSa ]cUVb b] Z]]Y ZWYS bWbZSa O\R aSQ]\RO`g Q]\bS\b ]cUVb b] Z]]Y ZWYS aSQ]\RO`g Q]\bS\b´W\ ]bVS` e]`Ra O `SORS` aV]cZR PS OPZS b] RSRcQS bVS W\T]`[ObW]\OZ ab`cQbc`S ]T bVS ^OUS T`][ Wba ZOg]cb 3fO[^ZSa Sf^ZOW\ bVWa Q]\QS^b PSab 4WUc`S " aV]ea bSfb bVOb eOa\¸b T]`[ObbSR eWbV O\g dWacOZ VWS`O`QVg Ob OZZ

4 ( % " ! 3 ) # 3 / & 0 ! ' % , !9 / 5 4

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


475C@3 " <] dWacOZ VWS`O`QVg

>OaaOPZS Pcb \]b U`SOb EVOb¸a bVS []ab W[^]`bO\b W\T]`[ObW]\ W\ bVOb ^O`OU`O^V- G]c QO\ UcSaa bVOb bVS ¿`ab aS\bS\QS Wa bVS []ab W[^]`bO\b Pcb ]bVS`eWaS Wb¸a VO`R b] bSZZ aW\QS bVS eV]ZS PZ]QY ]T bSfb Wa dWacOZZg []\]b]\]ca =\QS g]c¸dS `SOR Wb O\R `SOZWhS Wb¸a O\ W\dWbObW]\ g]c QO\ bSZZ T`][ Q]\bSfb´Pcb g]c VOR b] `SOR Wb ¿`ab <]e ZSb¸a W[^`]dS ]\ bVWa SfO[^ZS EVWbSa^OQS Wa ]\S ]T bVS PSab b]]Za g]c VOdS T]` ]`UO \WhW\U O dWacOZ VWS`O`QVg 7b¸a O QVSO^ O\R U`OQSTcZ eOg ]T ^cZZW\U O^O`b []\]b]\]ca PZ]QYa ]T W\T]`[ObW]\

475C@3 " EWbV eVWbSa^OQS

7\ 4WUc`S " g]c QO\ Ob ZSOab aSS RWabW\Qb U`]c^a ]T W\T]`[ObW]\ /\R bVS VSORZW\S Ob bVS b]^´¾HSZRO¸a ! bV 0W`bVROg >O`bgœ´abO\Ra ]cb O PWb []`S PSQOcaS Wb VOa eVWbSa^OQS O`]c\R Wb A] R]Sa bVS \]b _cWbS Oa W[^]`bO\b @AD> [SaaOUS Ob bVS P]bb][ 0cb bVS bSfb bVOb g]c` SgS TOZZa ]\ ¿`ab Wa ^`]POPZg ¾G]c¸`S W\dWbSR b]œ 7b¸a aWbbW\U c^ bVS`S Pg WbaSZT Ob bVS c^^S` ZSTb Q]`\S` eVS`S SdS`g a^SOYS` ]T ZSTb b] `WUVb ZO\UcOUSa Z]]Ya ¿`ab BVOb OZ]\S UWdSa Wb c\eO` `O\bSR W[^]`bO\QS G]c OZa] VOdS bg^]U`O^Vg O\R ^]aWbW]\W\U Ob g]c` RWa^]aOZ eVWQV 4WUc`S " ! O^^ZWSa b] bVS aO[S ^`]PZS[

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


475C@3 " ! EWbV bg^]U`O^Vg O\R OZWU\[S\b

0WU P]ZR T]\ba R] bVS b`WQY T]` W[^]`bO\QS ]T Q]c`aS =c` SgSa O`S R`Oe\ b] RS\aS Q]\ b`OabSR aVO^Sa eWbV VSOdg µdWacOZ eSWUVb ¶ BVS W\dWbObW]\¸a []ab W[^]`bO\b ZW\S Wa W\ O UWO\b T]\b) bVS aSQ]\R []ab W[^]`bO\b ZW\S Wa W\ O ZO`US T]\b Pcb \]b Oa ZO`US) bVS P]Rg bSfb Wa \]`[OZ aWhSR AW[WZO`Zg bVS bW\g ZWUVbeSWUVb T]\b caSR T]` bVS RW`SQbW]\a Q][[S\b W\RWQObSa µg]c [Og eO\b b] `SOR bVWa Pcb Wb¸a \]b bVOb PWU O RSOZ WT g]c [Waa Wb ¶ A^ObWOZ ^]aWbW]\W\U R]Sa a][SbVW\U O ZWbbZS []`S Q][^ZSf VS`S 7b¸a PSW\U `SRc\RO\b eWbV bVS eVWbSa^OQS Pg aS^O`ObW\U a][S PZ]QYa ]T bSfb T`][ ]bVS`a 7b¸a OZa] S\VO\QW\U bVS O^ ^O`S\b W[^]`bO\QS ]T bVS µEVS\¶ O\R µEVS`S¶ bSfb´eVWQV O`S W[^]`bO\b´Pg [OYW\U bVS[ abO\R ]\ bVS OZ[]ab S[^bg ZSTb [O`UW\ OZWU\SR eWbV bVS VSORZW\S BVS aVO^Sa ]T a][S ^OUS SZS[S\ba UWdS g]c QZcSa b]] BVS Q][[S\b OP]cb RW`SQbW]\a Wa W\RS\bSR c\RS`\SObV bVS µEVS`S¶ bSfb W\ bVS SfO[^ZS G]c QO\ UcSaa bVOb bVS RW`SQbW]\a Q][[S\b `SZObSa b] Pcb Wa \]b Oa W[^]`bO\b Oa bVS bSfb OP]dS Wb BVS aO[S Z]UWQ O^^ZWSa b] b`SS dWSea OcfWZWO`g bSfb c\RS` ZW\Ya W\^cb VW\ba c\RS` bSfb ¿SZRa O\R a] T]`bV EWbV bVSaS O\R ]bVS` TO[WZWO` ab`cQbc`Sa ZWYS bOPZSa bVSW` dWacOZ aVO^Sa µbSZSU`O^V¶ [SO\W\U W[[SRW ObSZg PST]`S bVS caS` SdS\ abO`ba b] `SOR eVOb¸a W\ bVS[ 7\ bVWa QVO^bS` bVS 1S\bS` AbOUS ^ObbS`\ RSOZa RW`SQbZg eWbV dWacOZ VWS`O`QVg Pg S\Q]c`OUW\U g]c b] SabOPZWaV O aW\UZS ZO`US O`SO ]T bVS C7 b] R] bVS [OW\ bOaY CaW\U bVS BWbZSR ASQbW]\a ^ObbS`\ VSZ^a RS¿\S bVS dWacOZ VWS`O`QVg b]] /\R WT g]c RSdSZ]^ O DWacOZ 4`O[Se]`Y O\ ]bVS` ^ObbS`\ eVWQV S\Q]RSa V]e b] R] dWacOZ VWS`O`QVg eWbVW\ bVS eV]ZS C7 [OYS ac`S Wb OQQ][[]RObSa bVS RWTTS`S\b ZSdSZa ]T VWS`O`QVg g]c \SSR acQV Oa bWbZSa VSORZW\Sa acP VSORa ZWaba \OdWUObW]\ PO`a O\R OQbW]\ Pcbb]\a

4 ( % " ! 3 ) # 3 / & 0 ! ' % , !9 / 5 4

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


BVSaS [SQVO\Wa[a QO\ VSZ^ g]c ZOg ]cb O dWacOZ VWS`O`QVg(

C^^S` ZSTb Q]`\S` ^`STS`S\QS

EVWbSa^OQS

1]\b`OabW\U T]\ba( bVS PWUUS` O\R P]ZRS` bVS []`S W[^]`bO\b bVS W\T]`[ObW]\

1]\b`OabW\U T]`SU`]c\R O\R POQYU`]c\R Q]Z]`a( ^cbbW\U eVWbS bSfb ]\ O PZOQY POQYU`]c\R T]` W\abO\QS [OYSa O dS`g ab`]\U abObS[S\b ]\ O eVWbS ^OUS

>]aWbW]\W\U OZWU\[S\b O\R W\RS\bW\U( W\RS\bSR bSfb Wa acP]`RW\ObS b] eVObSdS`¸a OP]dS Wb

5`O^VWQa acQV Oa ZW\Sa P]fSa O\R Q]Z]`SR PO`a( bVW\Ua W\ O P]f ]` U`]c^ U] b]USbVS`

G]c¸ZZ ¿\R bVOb [O\g C7a O\R ^`W\bSR U`O^VWQa caS aSdS`OZ ]T bVSaS [SQVO\Wa[a Ob ]\QS ESP ^OUSa T`S_cS\bZg caS P]bV Q]Z]` O\R T]\ba b] RWTTS`S\bWObS VSORZW\Sa T`][ P]Rg bSfb) [O\g C7a caS P]bV U`]c^ P]fSa O\R eVWbSa^OQS b] T]`[ dWacOZ U`]c^a BVOb¸a ]YOg 6OdW\U OZZ bVSaS µdO`WOPZSa¶ b] QV]]aS T`][ UWdSa g]c O Z]b ]T RSaWU\ T`SSR][ Sa^SQWOZZg aW\QS bVSg SOQV VOdS O RcOZ `]ZS( b] aV]e V]e bVS C7 Wa ]`UO\WhSR O\R b] Q][[c\WQObS P`O\RW\U S[] bW]\ O\R ]bVS` \]\ `ObW]\OZ Obb`WPcbSa 7¸ZZ `Sbc`\ b] bVWa TOaQW\ObW\U b]^WQ W\ 1VO^bS` ' ;SO\eVWZS ZSb¸a Z]]Y []`S RSS^Zg Ob dWacOZ ]`UO\WhObW]\ D 7 A C / : 4 : = E ( E 6 /B A 6 = C : 2 7 : = = 9 /B < 3 F B -

DWacOZ À]e RSOZa eWbV bVS b`OQYa bVOb `SORS`a¸ SgSa bS\R b] T]ZZ]e Oa bVSg aQO\ bVS ^OUS 7b¸a W\bW[ObSZg `SZObSR b] dWacOZ VWS`O`QVg ]T Q]c`aS´O eSZZ RSaWU\SR dWacOZ VWS`O`QVg aSba c^ T]QOZ ^]W\ba ]\ bVS ^OUS eVS`SdS` g]c \SSR b] R`Oe ObbS\bW]\ b] bVS []ab W[^]`bO\b SZS [S\ba O\R dWacOZ À]e ZSORa bVS SgSa T`][ bV]aS ^]W\ba W\b] bVS ZSaa W[^]`bO\b W\T]`[ObW]\ /a O RSaWU\S` g]c aV]cZR PS OPZS b] Q]\b`]Z dWacOZ À]e ]\ O ^OUS a] ^S]^ZS T]ZZ]e Wb W\ O^ ^`]fW[ObSZg bVS `WUVb aS_cS\QS ASdS`OZ T]`QSa QO\ e]`Y OUOW\ab SOQV ]bVS` eVS\ g]c b`g b] aSb c^ O dWacOZ À]e =\S Wa ]c` bS\RS\Qg b] `SOR b]^ b] P]bb][ O\R ZSTb b] `WUVb EVS\ TOQSR eWbV O []\]b]\]ca ^OUS ]T bSfb bVOb¸a eVOb g]c¸ZZ R] \Obc`OZZg) Pcb O\g dWacOZ T]QOZ ^]W\ba ]\ bVS ^OUS QO\ RWab`OQb g]c T`][ bVS cacOZ ^`]U`SaaW]\ T]` PSbbS` ]` e]`aS µ4]QOZ ^]W\ba¶ O`S bVS a^]ba g]c` SgSa QO\¸b `SaWab U]W\U b] G]c bS\R b] T]ZZ]e bVS[ T`][ ab`]\USab b] eSOYSab O\R bVS PSbbS` ^OUSa VOdS ]\Zg O TSe´VOdW\U b]] [O\g T]QOZ ^]W\ba RWZcbSa bVS W[^]`bO\QS ]T SOQV ]\S G]c QO\ aSb bVS[ c^ W\ [O\g RWTTS`S\b eOga acQV Oa Pg caW\U eVWbSa^OQS VWUV Q]\b`Oab PWU QVc\Yg T]\ba a^]ba ]T µW\bS`SabW\U¶ Q]Z]` Q]\dS`UW\U ZW\Sa VO`R SRUSa TOQSa O\R []bW]\ GSa bVWa ZWab `SaS[PZSa bVS ]\S OP]dS T]` dWacOZ VWS` O`QVg BWbZSa Z]U]a O\R Q`WbWQOZ aSQbW]\a ]T bSfb ]` W[OUSa caS bVSaS ^`]^S`bWSa b] PSQ][S T]QOZ ^]W\ba BVS \Sfb bW[S g]c ^WQY c^ O [OUOhW\S Z]]Y Ob a][S eSZZ RSaWU\SR ORa O\R \]bWQS eVOb g]c` SgSa U`OdWbObS b]eO`R BVS PSab Q][[S`QWOZ U`O^VWQ O`bWaba O`S [OabS`a Ob aSbbW\U c^ T]QOZ ^]W\ba b] [O\W^cZObS eVOb g]c aSS ¿`ab

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


6]eSdS` WT g]c¸dS SdS` P`]cUVb c^ O\ OR ÂżZZSR eSP ^OUS O\R ^]W\bSRZg WU\]`SR bVS P`WUVbZg Q]Z]`SR []dW\U ORa a] g]c Q]cZR `SOR bVS []\]b]\]ca PZ]QYa ]T bSfb bVOb g]c eS\b bVS`S b] `SOR bVS\ g]c Y\]e bVOb eS¸`S \]b [S`SZg aZOdSa b] ]c` VO`ReW`SR dWacOZ agabS[a ES QO\ QV]]aS b] WU\]`S eVOb eS bVW\Y eS R]\¸b \SSR b] Z]]Y Ob O\R hS`] W\ ]\ eVOb eS bVW\Y Wa bVS W[^]`bO\b ^O`b ]T bVS ^OUS BVca [SO\W\U O\R Q]\bSfb OZa] ^ZOg O PWU ^O`b W\ dWacOZ Ă€]e 7T g]c PcWZR O C7 W\ eVWQV aS_cS\QS [OYSa O RWTTS`S\QS´ZWYS O EWhO`R ]` O RWOZ]U P]f W\ eVWQV SO`Zg QV]WQSa OTTSQb ZObS` QV]WQSa´bVS\ bVW\Y OP]cb dWacOZ Ă€]e 3dS\ WT g]c` C7 R]Sa \]b RS^S\R c^]\ aS_cS\QS g]c aV]cZR bVW\Y OP]cb Wb O\geOg aW\QS O U]]R dWacOZ Ă€]e Wa SOaWS` ]\ g]c` caS`a¸ SgSa 7b¸a \]b VO`R b] aSb c^ O ZOg]cb bVOb Ă€]ea eSZZ Pcb PS ]\ g]c` UcO`R OUOW\ab ZOg]cb QV]WQSa bVOb e]`Y OUOW\ab Wb >ZOQS g]c` Q]\b`]Za O\R Pcbb]\a OZ]\U O ab`OWUVbT]`eO`R dWacOZ ^ObV /b bVS S\R ]T bVOb ^ObV ^cb bVS ZW\Y ]` Pcbb]\ bVOb Âż\WaVSa bVS bOaY ÂľAcP[Wb Âś Âľ@Sbc`\ b] [OW\ ^OUS Âś ]` Âľ=9Âś O\R P`W\Ua bVS caS` a][SeVS`S SZaS 4WUc`S " " aV]ea O RWOZ]U P]f eWbV O \WQS dWacOZ Ă€]e <]bWQS V]e g]c` SgSa abO`b Ob bVS b]^ []dS ab`OWUVb R]e\ bVS Q]Zc[\ ]T bSfb ÂżSZRa ^S`VO^a aZ]eW\U R]e\ Ob bVS V]`Wh]\bOZ ZW\Sa O\R ÂľZO\RÂś Ob bVS T]c` WQ]\a /TbS` ^OcaW\U bVS`S b] bOYS bVS[ W\ ^S`VO^a g]c` SgSa [Og V]^ R]e\ b] SWbVS` bVS 6SZ^ ]` bVS =9 O\R 1O\QSZ Pcbb]\a

475C@3 " " ;OQ`][SRWO 1]\b`WPcbS¸a ¾7\aS`b BOPZSœ RWOZ]U P]f

<]e Ob a][S ^]W\b g]c¸ZZ ^`]POPZg bOYS bVS bW[S b] `SOR bVS ZOPSZa Pcb bVSg¸`S a] dWacOZZg ZWUVbeSWUVb bVOb bVSg ZWYSZg RWR\¸b QObQV g]c` SgS ¿`ab BVS bSfb ¿SZRa ^`]POPZg RWR PSQOcaS bVSg¸`S T]QOZ ^]W\ba´eVWbS Q]\b`OabW\U OUOW\ab U`Og ab`]\UZg OZWU\SR O\R aS[O\bWQOZZg W[^]`bO\b

4 ( % " ! 3 ) # 3 / & 0 ! ' % , !9 / 5 4

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


7\ ac[[O`g(

B]^ b] P]bb][ O\R ZSTb b] `WUVb Wa bVS RSTOcZb dWacOZ À]e

Ab`]\U T]QOZ ^]W\ba eWZZ R`Oe bVS SgSa ¿`ab T]ZZ]eSR Pg eSOYS` ]\Sa

BVS ^S`QSWdSR [SO\W\U ]T bVS ^OUS Q]\bS\b eWZZ QVO\US eVS`S bVS caS` QV]]aSa b] Z]]Y

5 @ = C > 7 < 5 / < 2 / : 7 5 < ; 3 < B ( E 6 /B 5 = 3 A E 7 B 6 E 6 /B -

G]c Y\Se bVWa OZ`SORg Pcb 7¸ZZ aOg Wb O\geOg PSQOcaS Wb¸a a] W[^]`bO\b( Pg U`]c^W\U bVW\Ua b]USbVS` dWacOZZg g]c abObS bVOb bVSg O`S `SZObSR 1]\dS`aSZg WT g]c ^cb be] bVW\Ua TO` OeOg T`][ SOQV ]bVS` acQV Oa bVS ZOab ¿SZR ]T O T]`[ O\R bVS T]`[¸a µAcP[Wb¶ Pcbb]\ bVS\ g]c abObS bVOb bVSg¸`S \]b `SZObSR b] SOQV ]bVS` 7T dWacOZ À]e R]Sa\¸b abS^ W\ O\R ZSOR bVS caS`¸a SgSa b] bVS Pcbb]\ Pg a][S ]bVS` [SO\a bVS caS` [Og \]b aSS Wb :WYS T]QOZ ^]W\ba U`]c^W\U O\R OZWU\[S\b O`S \SQSaaO`g b] T]`[W\U O QZSO` dWacOZ VWS`O`QVg BVSg OZa] VSZ^ eWbV dWacOZ À]e Pg UcWRW\U bVS dWSeS`¸a SgSa T`][ U`]c^ b] U`]c^ BVS Vc[O\ dWacOZ agabS[ Q`OdSa ]`RS` ES¸`S eW`SR b] aSS ZO`US` T]`[a [ORS T`][ a[OZZS` ]\Sa ZWYS e]`Ra T`][ ZSbbS`a ]` bOPZSa T`][ U`WRa ]T QSZZa G]c QO\ bOYS ORdO\bOUS ]T bVWa \SSR T]` ]`RS` Pg µQZcabS`W\U¶ `SZObSR bVW\Ua b]USbVS` O\R Pg aS^O`ObW\U bV]aS QZcabS`a eWbV S\]cUV eVWbSa^OQS b] YSS^ bVS[ c\O[PWUc]caZg aS^O`ObS EVWbSa^OQS OUOW\ 7b¸a `S OZZg ]YOg b] caS Wb SdS\ W\ a[OZZ a^OQSa 7b¸a PSbbS` b] RWa^ZOg ZSaa W\T]`[ObW]\ eWbV []`S QZO`Wbg bVO\ b] Q`]eR O ^OUS b]] [cQV BVWa Wa V]e g]c Oaa]QWObS O bSfb ¿SZR eWbV Wba ZOPSZ O\ W[OUS eWbV Wba QO^bW]\ ]` O U`O^V eWbV bVS aZWRS` bVOb Q]\b`]Za Wb 5`]c^ P]fSa QO\ VSZ^ VS`S Pcb R]\¸b Sf^SQb bVS[ b] QO``g bVS S\bW`S Pc`RS\ ]T dWacOZ U`]c^W\U) UWdS bVS[ µ`]][ b] P`SObVS¶ ]\ O Q`]eRSR ^OUS 7T g]c a_cW\b g]c` SgSa a] g]c QO\¸b aSS bVS U`]c^ P]f¸a SRUSa Wa bVS`S S\]cUV eVWbSa^OQS bVOb g]c QO\ abWZZ [OYS ]cb bVS U`]c^a- 7T a] g]c¸`S R]W\U ¿\S /Za] PS QO`STcZ OP]cb \SabW\U U`]c^ P]fSa be] ]` []`S ZSdSZa RSS^ aW\QS Wb USba `SOZZg VO`R b] [OYS ]cb eVOb¸a eVOb B`g O RWTTS`S\b O^^`]OQV b] RSaWU\W\U bVS dWacOZ VWS`O`QVg /ZWU\[S\b Wa O\]bVS` []`S acPbZS eOg b] Oaa]QWObS bVW\Ua eWbV ]\S O\]bVS` 4]` W\abO\QS WT g]c VOdS be] aSba ]T Pcbb]\a TO` OeOg T`][ SOQV ]bVS` ]\ O RWOZ]U P]f Pcb bVSg R] a][S eVOb aW[WZO` bVW\Ua g]c QO\ ZW\S c^ ]\S U`]c^ c\RS` bVS ]bVS` O\R [OYS bVS[ bVS aO[S eWRbV b] S[^VOaWhS bVS aW[WZO`Wbg =` WT g]c VOdS be] T]`[a ]\ O ^OUS aS^O`ObSR Pg PZ]QYa ]T bSfb bVS\ ZW\S c^ bVS T]`[a¸ ZSTb SRUSa OUOW\ab ]\S W\dWaWPZS ZW\S O\R bVS bSfba¸ ZSTb SRUSa OUOW\ab O\]bVS` BVS bVS]`g PSVW\R U`]c^W\U O\R OZWU\[S\b eOa RSdSZ]^SR SO`Zg W\ bVS bV QS\bc`g Pg bVS 5SabOZb ^agQV]Z]UWaba BVSg RSaQ`WPSR aSdS`OZ ZOg]cb ^`]^S`bWSa bVOb aSS[ b] PS VO`ReW`SR W\b] ]c` dWacOZ agabS[a /[]\U bVS[ O`S bVS T]ZZ]eW\U( >`]fW[Wbg >cb bVW\Ua QZ]aS b]USbVS` O\R dWSeS`a eWZZ Oaa]QWObS bVS[ eWbV ]\S O\]bVS` BVWa Wa bVS POaWa T]` ab`]\U U`]c^W\U ]T Q]\bS\b O\R Q]\b`]Za ]\ O C7

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


AW[WZO`Wbg 7T be] bVW\Ua O`S bVS aO[S aVO^S aWhS Q]Z]` ]` ]`WS\bObW]\ bVS\ dWSeS`a eWZZ OZa] Oaa]QWObS bVS[ eWbV SOQV ]bVS` 1]\bW\cWbg =c` SgSa eO\b b] aSS Q]\bW\c]ca ZW\Sa O\R Qc`dSa T]`[SR Pg bVS OZWU\[S\b ]T a[OZZS` SZS[S\ba 1Z]ac`S ES OZa] eO\b b] aSS aW[^ZS QZ]aSR T]`[a ZWYS `SQbO\UZSa O\R PZ]Pa ]T eVWbSa^OQS bVOb O`S\¸b Sf^ZWQWbZg R`Oe\ T]` ca 5`]c^a ]T bVW\Ua ]TbS\ O^^SO` b] PS QZ]aSR T]`[a 4WUc`S " # RS^WQba SOQV ^`]^S`bg O\R V]e g]c QO\ Q][PW\S bVS[ b] Q`SObS O\ STTSQbWdS ]dS`OZZ RSaWU\

0ROXIMITY

3IMILARITY

#ONTINUITY

#LOSURE

!LL TOGETHER NOW 475C@3 " # 4]c` ]T bVS 5SabOZb ^`W\QW^ZSa

/a W[^]`bO\b Oa bVSg O`S W\RWdWRcOZZg bVSg¸`S PSab caSR W\ Q][PW\ObW]\ eWbV ]\S O\]bVS` =\QS OUOW\ `SRc\RO\Qg Wa \]b OZeOga POR) bVS ¿TbV U`]c^W\U Z]]Ya []`S ZWYS O\ OQbcOZ ^OUS ZOg]cb bVO\ O `Sb`] abgZSR []aOWQ

4 ( % " ! 3 ) # 3 / & 0 ! ' % , !9 / 5 4

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


1]\bW\cWbg O\R QZ]ac`S bVS\ Sf^ZOW\ OZWU\[S\b EVS\ g]c OZWU\ bVW\Ua g]c T]`[ O Q]\bW\c ]ca ZW\S eWbV bVSW` SRUSa O\R bVS caS`a T]ZZ]e bVOb ZW\S O\R ^S`VO^a acPQ]\aQW]caZg Oa ac[S O `SZObW]\aVW^ 7T bVS OZWU\SR WbS[a O`S Q]VS`S\b S\]cUV b] T]`[ O aVO^S´]` b] T]`[ ]\S ]cb ]T bVS eVWbSa^OQS ]` ¾\SUObWdS a^OQSœ O`]c\R Wb´bVS\ QZ]ac`S Wa OZa] Ob e]`Y ORR W\U b] bVS STTSQb >CBB7<5 7B /:: B=53B63@

=\ bVS eSP ^OUS aV]e\ W\ 4WUc`S " $ bVS bSfb Wa PZc``SR a] bVOb g]c QO\¸b `SOR Wb SOaWZg 0cb 7 PSb g]c QO\ c\RS`abO\R O Z]b ]T bVS ^OUS ab`cQbc`S

475C@3 " $ 4`][ Vbb^( eee OZWabO^O`b Q][

7\ g]c` ¿`ab UZO\QS g]c Xcab ^S`QSWdSR [O\g ]T bVS bVW\Ua eS Xcab bOZYSR OP]cb :Sb¸a RSQ]\ ab`cQb bVOb ¿`ab UZO\QS 4W`ab eVOb ^ObV RWR g]c` SgSa T]ZZ]e- >`]POPZg ]\S ]T bV]aS W\ 4WUc`S " % ]` a][S dO`WObW]\ bVS`S]T

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


475C@3 " % >]aaWPZS dWacOZ À]ea ]\ OZWabO^O`b Q][

BVS Z]U] Wa ]PdW]caZg O T]QOZ ^]W\b´Wb aWba eVS`S eSP ^OUS VSORS`a OZeOga aWb O\R Wb¸a O VSOdg T]\b eWbV VWUV eVWbS ]\ RO`Y Q]\b`Oab BVS VSORZW\Sa R`Oe ObbS\bW]\ PSQOcaS ]T bVSW` Q]Z]` aWhS O\R eVWbSa^OQS aS^O`ObW]\ BVS Q]Zc[\ ]\ bVS `WUVb Z]]Ya RS\aS ]`O\US O\R dWacOZZg W\bS`SabW\U a] g]c [Og VOdS Z]]YSR Ob Wb b]] <]bS bVOb bVS bVW`R dWacOZ Ă€]e dO`WObW]\ R]Sa\¸b abO`b Ob bVS Z]U] @SORS`a eV] dWaWb O ^OUS eWbV aW\UZS [W\RSR W\bS`Sab W\ bVS Q]\bS\b [Og aW[^Zg WU\]`S bVS VSORS` O\R abO`b Ob bVS c^^S` ZSTb ]T bVS ÂľeVWbS ^O`bÂś ]T bVS ^OUS´bVS`S¸a \] ^S`QSWdSR PS\SÂżb W\ Z]]YW\U Ob bVS ^OUS b`O^^W\Ua <]e eVOb OP]cb bVS 5SabOZb ^`W\QW^ZSa eS Xcab Q]dS`SR- BVS ^OUS ^`SaS\ba bV`SS [OW\ U`]c^a SOQV ]T eVWQV VOa PWU `SR bSfb a[OZZS` `SR bSfb O\R PZ]QYa ]T P]Rg bSfb AW[WZO`Wbg O\R ^`]fW[Wbg T]`[ bVSaS ^S`QS^bcOZ U`]c^a) eVWbSa^OQS aSba bVS[ O^O`b BVS Q]Zc[\ ]\ bVS `WUVb Wa aSb ]TT Pg O dS`g ab`]\U SRUS´OQbcOZZg be] ]T bVS[) \]bS bVS acPQ]Zc[\ OZ]\U Wba ZSTb aWRS´ O\R Wba RS\aWbg O\R Q]Z]` UWdS bVWa aVO^S O ab`]\U dWacOZ Q]VS`S\QS BVS RO`Y POQYU`]c\R ]T bVS VSORS` Q][^`WaSa O\]bVS` dWacOZ T]`[ Oa R]Sa bVS U`Og T]]bS` eWbV Wba aW\UZS Q]\bW\c]ca ZW\S ]T bSfb 4WUc`S " & aV]ea bVS U`]c^W\Ua ]\ bVWa ^OUS

475C@3 " & 5`]c^W\U ]\ bVS /:/ eSP ^OUS

4 ( % " ! 3 ) # 3 / & 0 ! ' % , !9 / 5 4

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


/ZZ bVWa T]`[ObbW\U Q]\b`WPcbSa b] bVS dWacOZ VWS`O`QVg 1]\bSfb O\R VWUVS` ZSdSZ [S\bOZ ^`] QSaaW\U YWQY W\ Oa g]c abO`b b] ^O`aS eVOb g]c aSS O\R O^^Zg eVOb g]c OZ`SORg Y\]e OP]cb eSP aWbSa G]c QO\ SOaWZg RWabW\UcWaV bVS VSORS` T]]bS` [OW\ Q]\bS\b O\R OcfWZWO`g W\T]`[ObW]\ EWbV W\ bVS [OW\ Q]\bS\b bVS`S O`S bV`SS ^]W\ba ]T W\bS`Sab´^`]POPZg ZW\YSR O`bWQZSa´SOQV eWbV Wba VSORS` acPVSORS`a PgZW\Sa- O\R P]Rg bSfb EWbVW\ bVS OcfWZWO`g W\T]`[ObW]\ bVS`S¸a O [W\W T]`[ aSO`QV- be] bOPZSa ^`]POPZg Q]\bOW\W\U ZW\Ya aW\QS bVSg¸`S \]b PZOQY O\R ]bVS` bSfb BVS VSORS` Q]\bOW\a ¿dS bSfba bVOb O`S OZWU\SR O\R Z]]Y aW[WZO` ^`]POPZg b]^ ZSdSZ \OdWUObW]\ G]c QO\ aOTSZg WU\]`S bVS T]]bS` Oa g]c ^`]POPZg R] ]\ []ab eSP ^OUSa C A 7 < 5 2 G < / ; 7 1 2 7 A > : /G A

3dS`gbVW\U 7¸dS RWaQcaaSR a] TO` O^^ZWSa S_cOZZg b] C7a eSP aWbSa ^]abS`a PWZZP]O`Ra O\R [OUOhW\S ^OUSa BVSg RSOZ eWbV abObWQ Oa^SQba ]T ZOg]cb /V Pcb g]c VOdS O Rg\O[WQ Q][ ^cbS` RWa^ZOg b] e]`Y eWbV´O\R acRRS\Zg bW[S PSQ][Sa O\]bVS` RW[S\aW]\ ]T RSaWU\ 8cab Oa W[^]`bO\bZg Q][^cbS`a ^S`[Wb caS` W\bS`OQbW]\ eWbV bVS ZOg]cb b] O\ SfbS\b bVOb []ab ^`W\bSR bVW\Ua QO\¸b BVS`S O`S [O\g [O\g eOga g]c QO\ bOYS ORdO\bOUS ]T bVS Rg\O[WQ \Obc`S ]T Q][^cbS` RWa^ZOga G]c QO\ Q]\QS\b`ObS ]\ a^OQS caOUS T]` SfO[^ZS´SdS\ bVS PWUUSab Q]\ac[S` U`ORS Q][^cbS` aQ`SS\a VOdS ZSaa caOPZS a^OQS bVO\ aOg O ^]abS` ]` O \Sea^O^S` ^OUS BVOb¸a ZWTS 7T g]c e]`Y eWbV >2/a ]` QSZZ ^V]\Sa g]c¸dS U]b O\ Sa^SQWOZZg bW\g a^OQS b] e]`Y W\ BVS`S O`S [O\g bSQV\W_cSa T]` caW\U bVOb a^OQS b] ^`SaS\b []`S Q]\bS\b bVO\ g]c QO\ aV]e Ob ]\S bW[S EVOb R] g]c [SO\ ZSaa a^OQS7b¸a b`cS g]c` \WQS W\QV []\Wb]` Wa ^VgaWQOZZg PWUUS` bVO\ O [OUOhW\S a^`SOR /\R O eWRS QW\S[O RWa^ZOg [WUVb PS PWUUS` bVO\ O bOPZ]WR \Sea^O^S` BVS `SOZ ^`]PZS[ Wa `Sa]ZcbW]\ ;]ab C7a Q]\bOW\ O Z]b ]T bSfb /\R Oa ]T bVWa e`WbW\U []ab aQ`SS\a Xcab QO\¸b `S\RS` bSfb Ob O ^]W\b aWhS Oa a[OZZ Oa ^`W\b QO\ [O\OUS O\R VOdS Wb abWZZ PS `SOROPZS A] g]c QO\¸b TWb Oa [O\g Q]Zc[\ W\QVSa T]` W\abO\QS ]\ O aQ`SS\ bVOb¸a bVS aO[S ^VgaWQOZ aWhS Oa O ^WSQS ]T ^O^S` A]``g CaW\U aQ`]ZZPO`a Wa ]\S Q][[]\ eOg ]T ^`SaS\bW\U O a[OZZ µdWSe^]`b¶ ]\b] O ZO`US bVW\U ZWYS bSfb O\ W[OUS ]` O bOPZS AQ`]ZZPO`a ZSb bVS caS` []dS O`]c\R Ob eWZZ W\ ]\S ]` be] RW [S\aW]\a 0cb `ST`OW\ T`][ caW\U V]`Wh]\bOZ aQ`]ZZW\U eWbV bSfb ^ZSOaS =` WT g]c QO\ QO`dS c^ bVS Q]\bS\b W\b] Q]VS`S\b aSQbW]\a g]c VOdS aSdS`OZ ]^bW]\a´1O`R AbOQYa 1Z]aOPZS >O\SZa O\R ;]dOPZS >O\SZa OZZ ^cb a][S ZOg]cb Q]\b`]Z W\b] bVS caS`¸a VO\Ra c\ZWYS bVS []`S abObWQ BWbZSR ASQbW]\a G]c OZa] QO\ a^ZWb c^ Q]\bS\b ]dS` [cZbW^ZS dW`bcOZ ^OUSa O\R ZSb bVS caS` \OdWUObS PSbeSS\ bVS[) aSS 1VO^bS` ! <OdWUObW]\ BVSg W\d]YS bW[S Pg ZSbbW\U bVS caS` aSS dO`W]ca Q]\bS\b Ob RWTTS`S\b bW[Sa ]T bVSW` QV]]aW\U 7T g]c eO\b b] RW`SQb bVS caS` bV`]cUV O aS_cS\QS ]T abS^a @Sa^]\aWdS 3\OPZW\U O\R @S a^]\aWdS 2WaQZ]ac`S O`S be] eSZZ Y\]e\ Rg\O[WQ eOga ]T R]W\U a]

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


4( % 0!4 4 % 2 . 3 BVWa QVO^bS`¸a ^ObbS`\a UWdS g]c a^SQW¿Q eOga b] ^cb OZZ bVSaS ZOg]cb Q]\QS^ba W\b] ^ZOg BVS ¿`ab be] DWacOZ 4`O[Se]`Y O\R 1S\bS` AbOUS ORR`Saa bVS dWacOZ VWS`O`QVg ]T bVS eV]ZS ^OUS aQ`SS\ ]` eW\R]e `SUO`RZSaa ]T bVS bg^S ]T Q]\bS\b g]c ^cb W\b] bVOb ^OUS G]c aV]cZR Q]\aWRS` DWacOZ 4`O[S e]`Y SO`Zg W\ O ^`]XSQb aW\QS Wb OTTSQba OZZ bVS [OX]` ^OUSa O\R eW\R]ea W\ O\ W\bS`TOQS

! DWacOZ 4`O[Se]`Y

!!

1S\bS` AbOUS

BVS \Sfb U`]c^ ]T ^ObbS`\a `S^`SaS\ba T]c` OZbS`\ObWdS eOga ]T µQVc\YW\U¶ Q]\bS\b ]\ O ^OUS ]` eW\R]e BVSg¸`S caSTcZ eVS\ g]c VOdS O Z]b ]T abcTT b] aV]e ]\ bVS ^OUS Ob ]\QS =\QS g]c¸dS [ORS O RSQWaW]\ b] P`SOY c^ g]c` Q]\bS\b W\b] bVS[ObWQ aSQbW]\a g]c \SSR b] QV]]aS V]e b] ^`SaS\b bVS[ AV]cZR bVSg OZZ PS dWaWPZS Ob ]\QS ]` QO\ bVSg ]` aV]cZR bVSg PS dWSeSR W\RS^S\RS\bZg- 7a Wb ]YOg T]` caS`a b] [O\W^c ZObS bV]aS aSQbW]\a ]\ bVS ^OUS- BVSaS ^ObbS`\a RSOZ eWbV dWacOZ VWS`O`QVg Pcb bVSg OZa] W\d]ZdS W\bS`OQbWd Wbg O\R eWZZ VSZ^ g]c QV]]aS O[]\U bVS a^SQW¿Q [SQVO\Wa[a OdOWZOPZS W\ C7 b]]ZYWba

!" BWbZSR ASQbW]\a

!$ 1Z]aOPZS >O\SZa

!# 1O`R AbOQY

!%

;]dOPZS >O\SZa

@WUVb :STb /ZWU\[S\b O\R 2WOU]\OZ 0OZO\QS R`Oe ]\ bVS Q]\QS^ba ]T dWacOZ À]e OZWU\[S\b O\R ]bVS` bVW\Ua RWaQcaaSR W\ bVWa W\b`]RcQbW]\ BVSg RSOZ eWbV bVS a^ObWOZ `SZObW]\aVW^a O[]\U a[OZZS` []`S abObWQ SZS[S\ba ]\ O ^OUS ZWYS bSfb O\R Q]\b`]Za

!& @WUVb :STb /ZWU\[S\b

!' 2WOU]\OZ 0OZO\QS

BVS >`]^S`bg AVSSb ^ObbS`\ Wa O ZWbbZS c\cacOZ 7b b]] bOZYa OP]cb a^ObWOZ `SZObW]\aVW^a O[]\U a[OZZS` ^OUS SZS[S\ba Pcb Wb¸a Oa [cQV OP]cb Q]\bS\b O\R W\bS`OQbW]\ Oa Wb Wa OP]cb ZOg]cb 7b¸a VS`S PSQOcaS eVS\ O Y\]eZSRUSOPZS caS` `SQ]U\WhSa bVOb O ^OUS VOa O >`]^S`bg AVSSb ]\ Wb bVSW` Sf^SQbObW]\a O`S aSb _cWbS ab`]\UZg BVS ZOg]cb bSZZa bVS caS` ^`SQWaSZg V]e bVSg aV]cZR W\bS`OQb eWbV bVS ^OUS

" >`]^S`bg AVSSb BVS ZOab bV`SS ^ObbS`\a RSOZ eWbV bVS Rg\O[WQ Oa^SQba ]T Q]\bS\b ZOg]cb @Sa^]\aWdS 2WaQZ]ac`S O\R @S a^]\aWdS 3\OPZW\U O`S be] eOga ]T RW`SQbW\U O caS` bV`]cUV O aS`WSa ]T abS^a ]` O aSb ]T ]^bW]\a) bVSg W\ RWQObS eVOb QO\ PS R]\S Ob O\g ^]W\b W\ bW[S eVWZS ^`SdS\bW\U bVS caS` T`][ ab`OgW\U W\b] O`SOa bVOb eWZZ USb bVS[ W\b] b`]cPZS :W_cWR :Og]cb Wa O bSQV\W_cS T]` O``O\UW\U O ^OUS bVOb QO\ QVO\US aWhS O\R aVO^S Ob bVS caS`¸a eVW[

"

@Sa^]\aWdS 2WaQZ]ac`S

"! :W_cWR :Og]cb

" @Sa^]\aWdS 3\OPZW\U

4 ( % 0!4 4 % 2 . 3

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


VISUAL FRAMEWORK

475C@3 " ' 4`][ Vbb^( hW^QO` Q][

WHAT

2SaWU\ SOQV ^OUS b] caS bVS aO[S POaWQ ZOg]cb Q]Z]`a O\R abgZWabWQ SZS[S\ba Pcb UWdS bVS RSaWU\ S\]cUV ÀSfWPWZWbg b] VO\RZS dO`gW\U ^OUS Q]\bS\b USE WHEN

G]c¸dS PcWZb O eSP aWbS eWbV [cZbW^ZS ^OUSa ]` O C7 eWbV [cZbW^ZS eW\R]ea´W\ ]bVS` e]`Ra OZ[]ab O\g Q][^ZSf a]TbeO`S G]c eO\b Wb b] ¾VO\U b]USbVS`œ O\R Z]]Y ZWYS ]\S bVW\U RSZWPS`ObSZg RSaWU\SR) Wb aV]cZR PS SOag b] caS O\R \OdWUObS WHY

EVS\ O C7 caSa Q]\aWabS\b Q]Z]` T]\b O\R ZOg]cb O\R eVS\ bWbZSa O\R \OdWUObW]\OZ OWRa´aWU\^]aba´ O`S W\ bVS aO[S ^ZOQS SdS`g bW[S caS`a Y\]e eVS`S bVSg O`S O\R eVS`S b] ¿\R bVW\Ua BVSg R]\¸b VOdS b] ¿Uc`S ]cb O \Se ZOg]cb SOQV bW[S bVSg aeWbQV Q]\bSfb T`][ ]\S ^OUS ]` eW\R]e b] O\]bVS` 6OdS g]c SdS` aSS\ O P]]Y W\ eVWQV bVS ^OUS \c[ PS`a O\R VSORW\Ua eS`S W\ O RWTTS`S\b ^ZOQS ]\ SOQV ^OUS-

/ ab`]\U dWacOZ T`O[Se]`Y `S^SObSR ]\ SOQV ^OUS VSZ^a bVS ^OUS Q]\bS\b abO\R ]cb []`S BVOb eVWQV Wa Q]\abO\b TORSa W\b] bVS POQYU`]c\R ]T bVS caS`¸a OeO`S\Saa) bVOb eVWQV QVO\USa Wa \]bWQSR 4c`bVS` []`S ORRW\U QVO`OQbS` b] bVS RSaWU\ ]T bVS dWacOZ T`O[Se]`Y VSZ^a eWbV bVS P`O\RW\U ]T g]c` eSP aWbS ]` ^`]RcQb´bVS ^OUSa PSQ][S `SQ]U\WhOPZS Oa g]c`a

HOW

2`Oe c^ O\ ]dS`OZZ Z]]Y O\R TSSZ T]` SOQV ^OUS ]` eW\R]e W\ bVS bVW\U g]c PcWZR 6][S ^OUSa O\R [OW\ eW\R]ea O`S Âľa^SQWOZÂś O\R O`S cacOZZg ZOWR ]cb O ZWbbZS RWTTS`S\bZg T`][ acPaWRWO`g ^OUSa Pcb bVSg abWZZ aV]cZR aVO`S QS`bOW\ QVO`OQbS`WabWQa eWbV bVS `Sab ]T bVS O`bWTOQb 4]` SfO[^ZS(

Â’ 1]Z]`( POQYU`]c\Ra bSfb Q]Z]`a O\R OQQS\b Q]Z]`a

Â’ 4]\ba( T]` bWbZSa acPbWbZSa ]`RW\O`g bSfb O\R [W\]` bSfb

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


E`WbW\U abgZS O\R U`O[[O`( bWbZSa \O[Sa Q]\bS\b aV]`b RSaQ`W^bW]\a O\g Z]\U PZ]QYa ]T bSfb O\gbVW\U bVOb caSa ZO\UcOUS

/ZZ ]bVS` ^OUSa ]` eW\R]ea aV]cZR OZa] aVO`S bVS T]ZZ]eW\U Oa O^^`]^`WObS

µG]c O`S VS`S¶ aWU\^]aba( bWbZSa Z]U]a P`SORQ`c[P b`OWZa O\R 1O`R AbOQY W\RSfSa acQV Oa bOPa ]` ZW\Y Q]Zc[\a

<OdWUObW]\OZ RSdWQSa( aSba ]T abO\RO`R ZW\Ya =9 1O\QSZ Pcbb]\a POQY Pcbb]\a µ_cWb¶ ]` µSfWb¶ Pcbb]\a O\R \OdWUObW]\OZ ^ObbS`\a acQV Oa 5Z]POZ <OdWUObW]\ AS_cS\QS ;O^ O\R 0`SORQ`c[Pa OZZ 1VO^bS` !

BSQV\W_cSa caSR b] RS¿\S BWbZSR ASQbW]\a

A^OQW\U O\R OZWU\[S\b( ^OUS [O`UW\a ZW\S a^OQW\U bVS UO^a PSbeSS\ ZOPSZa O\R bVSW` Oaa]QWObSR Q]\b`]Za O\R bSfb O\R ZOPSZ XcabW¿QObW]\

=dS`OZZ ZOg]cb U`WR( bVS ^ZOQS[S\b ]T bVW\Ua ]\ bVS ^OUS W\ Q]Zc[\a O\R ]` `]ea bOYW\U

W\b] OQQ]c\b bVS [O`UW\a O\R a^OQW\U WaacSa ZWabSR SO`ZWS`

7T g]c¸`S TO[WZWO` eWbV U`O^VWQ RSaWU\ Q]\QS^ba g]c [Og `SQ]U\WhS a][S ]T bVSaS bSQV\W_cSa Oa Q][ ^`WaW\U O ZOg]cb U`WR / ZOg]cb U`WR Wa O ab`cQbc`OZ bS[^ZObS T]` O aSb ]T ^OUSa ]` ZOg]cba 3OQV W\RW dWRcOZ ^OUS Wa RWTTS`S\b Pcb OZZ ^OUSa caS a^SQW¿SR [O`UW\a O\R OZWU\ bVSW` Q]\bS\ba OZ]\U W\dWaWPZS U`WRZW\Sa / U]]R DWacOZ 4`O[Se]`Y R]Sa W\RSSR W\QZcRS O ZOg]cb U`WR Pcb Wb OZa] W\QZcRSa ]bVS` Oa ^SQba ]T Z]]Y O\R TSSZ acQV Oa Q]Z]`a dWacOZ RS bOWZa O\R e`WbW\U abgZS 7[^ZS[S\bObW]\ ]T O DWacOZ 4`O[Se]`Y aV]cZR T]`QS g]c b] aS^O`ObS abgZWabWQ Oa^SQba ]T bVS C7 T`][ bVS Q]\bS\b BVWa Wa\¸b O POR bVW\U 7T g]c RS ¿\S bVS T`O[Se]`Y W\ ]\Zg ]\S ^ZOQS´acQV Oa O 1AA abgZSaVSSb ]` O 8OdO QZOaa´Wb ZSba g]c QVO\US bVS T`O[Se]`Y W\RS^S\RS\bZg T`][ bVS Q]\bS\b eVWQV [SO\a g]c QO\ beSOY Wb O\R USb Wb `WUVb []`S SOaWZg 7b¸a OZa] U]]R a]TbeO`S S\UW\SS`W\U ^`OQbWQS

EXAMPLES

475C@3 " BVS EW\R]ea O\R ;OQ =A Z]]Y O\R TSSZa VSZ^ b] W[^ZS[S\b O dWacOZ T`O[Se]`Y aW\QS Q]Z]`a T]\ba O\R Q]\b`]Za O`S TOW`Zg abO\RO`R 0cb g]c \SSR b] ORR bVS VWUVS` ZSdSZ ab`cQbc`S ZWYS bVS ZOg]cb U`WR O\R ZO\UcOUS BVSaS 3fQSZ aQ`SS\aV]ba P]bV Q][S T`][ bVS aO[S RWOZ]U P]f´>OUS ASbc^´O\R bVSg WZZcab`ObS bVS Q]\QS^b eSZZ /ZZ bVSaS QVO`OQbS`WabWQa O`S Q]\aWabS\b T`][ ^OUS b] ^OUS( Z]QObW]\ ]T OQbW]\ Pcbb]\a W\ bVS c^^S` O\R Z]eS` `WUVb) [O`UW\ aWhS W\RS\bW\U O\R dS`bWQOZ RWabO\QS PSbeSS\ bSfb ¿SZRa) SfbS\aW]\ ]T bSfb ¿SZRa b] bVS `WUVb SRUS) bVS caS ]T ZOPSZSR aS^O`Ob]`a acQV Oa µ>`W\b bWbZSa¶ O\R µ=`WS\bObW]\¶ b] RSZW[Wb BWbZSR ASQbW]\a) O\R QO^WbOZWhObW]\ O\R U`O[[O`

6)35!, &2!-%7/2+

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


475C@3 " ESP ^OUS RSaWU\S`a Y\]e V]e b] O^^Zg bVWa Q]\QS^b eSZZ 5]]UZS¸a ^OUSa O`S aW[^ZS O\R c\Tcaag Pcb dS`g dS`g `SQ]U\WhOPZS /ZZ aWU\^]aba O`S QZSO` O\R Q]\aWabS\b´bVS Z]U] bVS ^OUS bWbZS O\R acPbWbZS ¾7[OUS ASO`QVœ O\R ¾5`]c^aœ O\R bVS ]bVS` ZW\Ya´O\R bVS OZZ W[^]`bO\b aSO`QV ¿SZR OZeOga Wa W\ bVS aO[S ^ZOQS

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


CENTER STAGE

475C@3 " 4ZOaV ;F

WHAT

>cb bVS []ab W[^]`bO\b ^O`b ]T bVS C7 W\b] bVS ZO`USab acPaSQbW]\ ]T bVS ^OUS ]` eW\R]e) QZcabS` aSQ]\R O`g b]]Za O\R Q]\bS\b O`]c\R Wb W\ a[OZZS` ^O\SZa

USE WHEN

BVS ^OUS¸a ^`W[O`g X]P Wa b] aV]e Q]VS`S\b W\T]` [ObW]\ b] bVS caS` ZSb VW[ SRWb O R]Qc[S\b ]` S\OPZS VW[ b] ^S`T]`[ O QS`bOW\ bOaY ;]ab O^ ^ZWQObW]\a QO\ caS 1S\bS` AbOUS´bOPZSa O\R a^`SOR aVSSba T]`[a eSP ^OUSa O\R U`O^VWQOZ SRWb]`a OZZ _cOZWTg

WHY

G]c aV]cZR UcWRS bVS caS`¸a SgSa W[[SRWObSZg b] bVS abO`b ]T bVS []ab W[^]`bO\b W\T]`[ObW]\ ]` bOaY `ObVS` bVO\ ZSbbW\U bVS[ eO\RS` ]dS` bVS ^OUS W\ Q]\TcaW]\ /\ c\O[PWUc]ca QS\b`OZ S\bWbg O\QV]`a bVSW` ObbS\bW]\ 8cab Oa bVS ZSOR aS\bS\QS W\ O \Sea O`bWQZS SabOPZWaVSa bVS acPXSQb [ObbS` O\R ^c`^]aS ]T bVS O`bWQZS a] bVS S\bWbg W\ 1S\bS` AbOUS SabOPZWaVSa bVS ^c`^]aS ]T bVS C7

=\QS bVOb¸a R]\S bVS caS` eWZZ OaaSaa bVS WbS[a W\ bVS ^S`W^VS`g W\ bS`[a ]T V]e bVSg `SZObS b] eVOb¸a W\ bVS QS\bS` BVWa Wa SOaWS` T]` bVS caS` bVO\ `S ^SObSRZg aQO\\W\U bVS ^OUS b`gW\U b] ¿Uc`S Wb ]cb´eVOb Q][Sa ¿`ab- EVOb¸a aSQ]\R- 6]e R]Sa bVWa `SZObS b] bVOb- /\R a] ]\

HOW

3abOPZWaV O dWacOZ VWS`O`QVg eWbV bVS ÂľQS\bS` abOUSÂś R][W\ObW\U SdS`gbVW\U SZaS ASS bVS QVO^bS` W\ b`]RcQbW]\ T]` O RWaQcaaW]\ ]T dWacOZ VWS`O`QVg EVS\ RSaWU\W\U O 1S\bS` AbOUS Q]\aWRS` bVSaS TOQb]`a bV]cUV \]\S ]T bVS[ O`S OPa]ZcbSZg `S_cW`SR( AWhS BVS 1S\bS` AbOUS Q]\bS\b aV]cZR PS Ob ZSOab beWQS Oa eWRS Oa eVObSdS` Wa W\ Wba aWRS [O` UW\a O\R beWQS Oa bOZZ Oa Wba b]^ O\R P]bb][ [O`UW\a BVS caS` [Og QVO\US Wba aWhS Pcb bVWa Wa V]e Wb aV]cZR PS eVS\ bVS caS` TW`ab aSSa Wb

BVS \O[S ]T bVWa ^ObbS`\ eOa Âż`ab Q]W\SR W\ ''& Pg > @ EO``S\ O\R ; DWZX]S\ W\ bVSW` ^O^S` Âľ2SaWU\ ^ObbS`\a T]` caS` W\bS`TOQSa Âś

# % . 4 % 2 3 4! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


1]Z]` CaS O Q]Z]` bVOb Q]\b`Oaba eWbV bVS W\T]`[O bW]\ W\ bVS [O`UW\a 7\ RSaYb]^ C7a eVWbS e]`Ya eSZZ OUOW\ab EW\R]ea U`Og Sa^SQWOZZg T]` bOPZSa O\R b`SSa /a Wb VO^^S\a eVWbS ]TbS\ e]`Ya W\ eSP ^OUSa b]] aW\QS ORa O\R \OdWUObW]\ PO`a cacOZZg caS ]bVS` Q]Z]`a Oa bVSW` POQYU`]c\Ra) OZa] eSP caS`a O`S µb`OW\SR¶ Pg Q]\dS\bW]\ b] Z]]Y T]` bVS ^ZOW\ bSfb ]\ O eVWbS POQYU`]c\R 6SORZW\Sa 0WU VSORZW\Sa O`S T]QOZ ^]W\ba O\R QO\ R`Oe bVS caS`¸a SgS b] bVS b]^ ]T bVS 1S\bS` AbOUS BVOb VO^^S\a W\ ^`W\b [SRWO b]] ]T Q]c`aS ASS bVS QVO^bS` W\b`]RcQbW]\ O\R BWbZSR ASQbW]\a T]` []`S ]\ VSORZW\Sa O\R T]QOZ ^]W\ba 1]\bSfb EVOb R]Sa bVS caS` Sf^SQb b] aSS eVS\ aVS ]^S\a c^ bVS ^OUS- / U`O^VWQ SRWb]`- / Z]\U bSfb O`bWQZS- / [O^- / TWZSagabS[ b`SS- E]`Y eWbV VS` ^`SQ]\QS^bW]\a) ^cb bVOb W\ QS\bS` abOUS O\R [OYS Wb `SQ]U\WhOPZS BVS caS` eWZZ

Z]]Y T]` Wb´bVWa b`c[^a OZZ ]bVS` `cZSa OP]cb dWacOZ ^S`QS^bW]\ 0cb Wb R]Sa\¸b [SO\ g]c QO\ T`cab`ObS VS` Pg VWRW\U eVOb aVS¸a Z]]YW\U T]` A][S eSP aWbSa ^cb bVSW` [OW\ Q]\bS\b a] TO` R]e\ bVS ^OUS bVOb Wb¸a µPSZ]e bVS T]ZR¶ W\ aV]`b eW\R]ea `S_cW`W\U bVS caS` b] aQ`]ZZ R]e\ b] TW\R Wb BVOb¸a Xcab aORWabWQ <]bWQS bVOb 7 RWR \]b [S\bW]\ ]\S b`ORWbW]\OZ ZOg]cb dO`WOPZS( ^]aWbW]\ 7b R]Sa\¸b [cQV [ObbS` eVS`S g]c ^cb bVS QS\bS` abOUS´b]^ ZSTb `WUVb P]bb][ QS\bS` OZZ ]T bVS[ QO\ PS [ORS b] e]`Y 7T Wb¸a PWU S\]cUV Wb¸ZZ S\R c^ []`S ]` ZSaa W\ bVS QS\bS` O\g eOg 9SS^ W\ [W\R bVOb eSZZ SabOPZWaVSR US\`Sa VOdS Q]\dS\bW]\a OP]cb eVOb U]Sa W\b] eVWQV [O`UW\a´S U b]]ZPO`a ]\ b]^ ]T U`O^VWQ SRWb]`a ]` \OdWUObW]\ PO`a ]\ bVS ZSTb aWRSa ]T eSP ^OUSa 0S Q`SObWdS Pcb eWbV g]c` SgSa ]^S\ 7T g]c¸`S W\ R]cPb bOYS O aQ`SS\aV]b ]T bVS ZOg]cb aV`W\Y Wb R]e\ PZc` Wb O\R OaY a][S]\S eVS`S ]\ bVS ^OUS bVSg bVW\Y bVS [OW\ Q]\bS\b aV]cZR abO`b /UOW\ aSS bVS QVO^bS` W\b`]RcQbW]\ T]` O\ SfO[^ZS

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


EXAMPLES

475C@3 " ! ;]ab PZ]Ua bS\R b] VOdS QZcbbS`SR ZOg]cba) Wb¸a O `O`S PZ]U bVOb aSba Wba [OW\ Q]\bS\b W\b] O ab`]\U QS\bS` abOUS BOYS O Z]]Y Ob bVWa aQ`SS\aV]b T`][ Vbb^( P]W\UP]W\U \Sb BVS ORa O\R ]bVS` [O`UW\OZ Q]\bS\b R] Obb`OQb ObbS\bW]\ Pcb bVS [WRRZS Q]Zc[\ Q]\bOW\W\U bVS PZ]U S\b`g Wa dS`g eWRS W\ Q][^O`Wa]\ 7b OZa] abO`ba QZ]aS b] bVS b]^ ]T bVS aQ`SS\´bVS VSORS` Wa PZSaaSRZg aV]`b BVS SgS Wa R`Oe\ SOaWZg b] bVS b]^ O`bWQZS

475C@3 " " B] R`WdS V][S bVS ^]W\b Z]]Y eVOb VO^^S\a eVS\ bVS [OX]` ^OUS aSQbW]\a O`S OPab`OQbSR ]cb Oa ^ZOW\ `SQbO\UZSa 7b [Og \]b Z]]Y dS`g eWRS W\ bVS aQ`SS\aV]b Pcb bVOb QS\bS` Q]Zc[\ Wa ]dS` bV`SS bW[Sa Oa eWRS Oa bVS ZSTbVO\R Q]Zc[\ ]T ORa 7b \SSRa bVOb [cQV eWRbV b] Q][^SbS eWbV bVS ORa¸ Ă€OaVg Q]Z]`a O\R Q]\b`Oab

# % . 4 % 2 3 4! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


475C@3 " # 5]]UZS ;O^a Wa O QZSO\ c\QZcbbS`SR W\bS`TOQS BVS [O^ SOaWZg bOYSa QS\bS` abOUS Pg caW\U aWhS O\R Q]Z]`( Wb ]QQc^WSa []ab ]T bVS eW\R]e O\R Wb¸a Q]Z]`TcZ W\ Q]\b`Oab b] bVS eVWbS POQYU`]c\R b]]Za Ob bVS b]^ O\R `WUVb

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


TITLED SECTIONS

475C@3 " $ Vbb^( OR]PS Q][

HOW

WHAT

2S¿\S aS^O`ObS aSQbW]\a ]T Q]\bS\b Pg UWdW\U SOQV ]\S O dWacOZZg ab`]\U bWbZS O\R bVS\ ZOgW\U bVS[ OZZ ]cb ]\ bVS ^OUS b]USbVS` USE WHEN

BVS`S¸a O Z]b ]T Q]\bS\b ]\ bVS ^OUS Pcb g]c eO\b b] [OYS bVS ^OUS SOag b] aQO\ O\R c\RS`abO\R G]c QO\ U`]c^ bVS Q]\bS\b W\b] bVS[ObWQ ]` bOaY POaSR aSQbW]\a bVOb [OYS aS\aS b] bVS caS`

4W`ab USb bVS W\T]`[ObW]\ O`QVWbSQbc`S `WUVb´a^ZWb c^ bVS Q]\bS\b W\b] Q]VS`S\b QVc\Ya O\R UWdS bVS[ aV]`b [S[]`OPZS \O[Sa ]\S ]` be] e]`Ra WT ^]aaWPZS <Sfb QV]]aS O ^`SaS\bObW]\(

4]` bWbZSa caS O T]\b bVOb abO\Ra ]cb T`][ bVS `Sab ]T bVS Q]\bS\b´P]ZR eWRS` ZO`US` ^]W\b aWhS ab`]\US` Q]Z]` SbQ @S[S[PS` bVOb \]bVW\U¸a ab`]\US` bVO\ PZOQY \]b SdS\ `SR

B`g `SdS`aW\U bVS bWbZS OUOW\ab O ab`W^ ]T Q]\b`OabW\U Q]Z]` EVWbS ]\ RO`Y QO\ [OYS Wb Z]]Y ZWYS O EW\R]ea bWbZSPO`

CaS eVWbSa^OQS b] aS^O`ObS aSQbW]\a

>cbbW\U aSQbW]\a ]\ RWTTS`S\b POQYU`]c\R Q]Z]`a e]`Ya eSZZ ]\ eSP ^OUSa O\R W\bS`TOQSa bVOb eO\b b] Z]]Y ZWYS eSP ^OUSa bV]cUV Wb¸a c\cacOZ ]\ RSaYb]^ C7a

0]fSa [ORS T`][ SbQVSR PSdSZSR ]` `OWaSR ZW\Sa O`S TO[WZWO` ]\ RSaYb]^ C7a BVSg QO\ USb Z]ab´O\R Xcab PSQ][S dWacOZ \]WaS´WT bVSg¸`S b]] PWU b]] QZ]aS b] SOQV ]bVS` ]` RSS^Zg \SabSR 7b QO\ PS R]\S eSZZ eVS\ Q][PW\SR eWbV bVS bWbZS) aSS bVS SfO[^ZSa

WHY

ESZZ RS¿\SR O\R eSZZ \O[SR aSQbW]\a ab`cQbc`S bVS Q]\bS\b W\b] SOaWZg RWUSabWPZS QVc\Ya SOQV ]T eVWQV Wa \]e c\RS`abO\ROPZS Ob O UZO\QS 7b [OYSa bVS W\T]`[ObW]\ O`QVWbSQbc`S ]PdW]ca ASS bVWa QVO^bS`¸a W\b`]RcQbW]\ T]` O RWaQcaaW]\ ]T dWacOZ VW S`O`QVg eVWQV Wa POaWQOZZg OP]cb `S\RS`W\U Q]\bS\b W\ O eOg bVOb Q][[c\WQObSa Wba OQbcOZ ab`cQbc`S ASS OZa] 1VO^bS` T]` O RS¿\WbW]\ ]T W\T]`[ObW]\ O`QVWbSQbc`S EVS\ bVS caS` aSSa O ^OUS aSQbW]\SR \SObZg W\b] QVc\Ya ZWYS bVWa Wb UcWRSa VS` SgS OZ]\U bVS ^OUS []`S Q][T]`bOPZg BVS Vc[O\ dWacOZ agabS[ OZ eOga Z]]Ya T]` PWUUS` ^ObbS`\a eVSbVS` bVSg¸`S RSZWPS`ObS ]` \]b A] ^cb bVS[ W\ RSZWPS`ObSZg

4)4,%$ 3%#4)/.3

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


7T bVS ^OUS Wa abWZZ b]] VO`R b] `SOR b`g caW\U 1O`R AbOQY Be] >O\SZ ASZSQb]` ]` 3fb`Oa ]\ 2S[O\R b] [O\OUS Wb OZZ G]c QO\ Q][PW\S a][S ]T bVSaS ^ObbS`\a eWbV BWbZSR ASQbW]\a b]] 3ZaSeVS`S W\ bVWa QVO^bS` 1Z]aOPZS >O\SZa O\R ;]dOPZS >O\SZa O`S OZbS`\ObWdS eOga ]T ^`SaS\bW\U µQVc\YSR¶ Q]\bS\b

7T g]c¸`S VOdW\U b`]cPZS UWdW\U `SOa]\OPZS bWbZSa b] bVSaS QVc\Ya ]T Q]\bS\b bVOb [Og PS O aWU\ bVOb bVS U`]c^W\U Wa\¸b O \Obc`OZ ¿b T]` bVS Q]\bS\b 1]\aWRS` `S]`UO\WhW\U Wb W\b] RWTTS`S\b QVc\Ya bVOb O`S SOaWS` b] \O[S O\R `S[S[PS` µ;WaQSZZO\S]ca¶ QObSU]`WSa [Og OZa] PS O aWU\ ]T \]b _cWbS `WUVb ]`UO\WhObW]\ bV]cUV a][SbW[Sa bVSg¸`S US\cW\SZg \SQSaaO`g

EXAMPLES

475C@3 " % Bg^WQOZ caOUS ]T BWbZSR ASQbW]\a W\ RSaYb]^ O^^ZWQObW]\a 7\ 3cR]`O¸a ^`STS`S\QSa RWOZ]U bVS P]fSa Z]]Y U]]R O`]c\R bVS U`WRa ]T QVSQYP]fSa bVS P]ZR bWbZSa abO\R ]cb QZSO`Zg O\R bVS`S Wa acT¿QWS\b eVWbSa^OQS PSbeSS\ bVS aSQbW]\a b] UWdS bVS[ dWacOZ µP`SObVW\U `]][ ¶ 7\ TOQb bVWa SfO[^ZS e]cZR e]`Y SdS\ WT bVS P]fSa eS`S S`OaSR

475C@3 " & BVWa aQ`SS\aV]b QO[S T`][ O Z]\U ^OUS TcZZ ]T 8OdO R]Qc[S\bObW]\ 3OQV aSQbW]\ Wa ZOPSZSR eWbV bVS PZcS PO`a eVWQV O`S dS`g SOag b] ¿\R O\R `SOR Oa bVS caS` aQ`]ZZa `O^WRZg R]e\ bVS ^OUS <]bWQS bVS caS ]T dWacOZ VWS`O`QVg VS`S( bVS [OW\ aSQbW]\a O`S [O`YSR eWbV ZO`US T]\ba O\R RO`YS` Q]Z]` eVWZS bVS [W\]` aSQbW]\ Ob bVS P]bb][ caSa O a[OZZS` T]\b O\R ZWUVbS` Q]Z]` /b bVS \Sfb ZSdSZ R]e\ bVS VWS`O`QVg bVS \O[Sa ]T QZOaaSa O\R [SbV]Ra abO\R ]cb PSQOcaS bVSg¸`S U`SS\ O\R ]cbRS\bSR) ¿\OZZg bVS P]Rg bSfb Wa a[OZZ O\R PZOQY Oa P]Rg bSfb cacOZZg Wa

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


CARD STACK

475C@3 " ' 7\bS`\Sb 3f^Z]`S` ^`]^S`bWSa RWOZ]U P]f

WHAT

>cb aSQbW]\a ]T Q]\bS\b ]\b] aS^O`ObS ^O\SZa ]` µQO`Ra ¶ O\R abOQY bVS[ c^ a] ]\Zg ]\S Wa dWaWPZS Ob O bW[S) caS bOPa ]` ]bVS` RSdWQSa b] UWdS caS`a OQ QSaa b] bVS[

BVS\ QV]]aS O ^`SaS\bObW]\(

BOPa O`S U`SOb Pcb bVSg cacOZZg `S_cW`S aWf ]` TSeS` QO`Ra 2]\¸b µR]cPZS `]e¶ bVS[ aW\QS R]cPZS `]eW\U Wa OZ[]ab \SdS` SOag b] caS) aQ`]ZZ bVS[ V]`Wh]\bOZZg WT bVSg e]\¸b ¿b W\ ]\S `]e OZZ Ob ]\QS

DS`bWQOZ bOPa ZSb g]c T]`QS O 1O`R AbOQY W\b] O \O``]e bOZZ a^OQS bVOb QO\¸b OQQ][[] RObS \]`[OZ bOP ^OUSa

/ ZSTbVO\R Q]Zc[\ ]T \O[Sa e]`Ya eSZZ ]\ [O\g eSP ^OUSa O\R RWOZ]U P]fSa G]c QO\ ¿b O Z]b ]T QO`Ra W\b] O Q]Zc[\ 7b ZSba g]c ]`UO\WhS QO`Ra W\b] O VWS`O`QVg b]] eVWQV g]c `SOZZg QO\¸b R] eWbV bOPa /b a][S ^]W\b Wb PSQ][Sa []`S ZWYS O Be] >O\SZ ASZSQb]`) bVS`S¸a `SOZZg \] QZSO` P]c\RO`g PSbeSS\ bVS[

A][S C7a VOdS O R`]^ R]e\ ZWab Ob bVS b]^ ]T bVS ^OUS eVWQV bOYSa ZSaa a^OQS bVO\ O ZW\Y Q]Zc[\ Pcb Ob bVS Q]ab ]T QZO`Wbg( R`]^ R]e\ ZWaba cacOZZg PSVOdS ZWYS Q]\b`]Za O\R O caS` [WUVb \]b `SQ]U\WhS Wb Oa O \OdWUO bW]\OZ RSdWQS 7b QO\ e]`Y WT bVS Q]\bOW\[S\b Wa dS`g ]PdW]ca) aSS bVS =A F SfO[^ZS W\ 4WUc`S " ! 0cb bVS caS` abWZZ QO\¸b aSS OZZ bVS QO`R bWbZSa Ob ]\QS

USE WHEN

BVS`S¸a b]] [cQV [ObS`WOZ ]\ bVS ^OUS / Z]b ]T Q]\b`]Za ]` bSfba O`S a^`SOR OQ`]aa bVS C7 eWbV]cb bVS PS\S¿b ]T O dS`g `WUWR ab`cQbc`S ZWYS O >`]^S` bg AVSSb ) bVS caS`¸a ObbS\bW]\ PSQ][Sa RWab`OQbSR G]c QO\ U`]c^ bVS Q]\bS\b W\b] BWbZSR ASQbW]\a Pcb bVSg e]cZR PS b]] PWU b] ¿b ]\ bVS ^OUS OZZ Ob ]\QS 4W\OZZg´O\R bVWa Wa W[^]`bO\b´caS`a R]\¸b \SSR b] aSS []`S bVO\ ]\S aSQbW]\ Ob ]\S bW[S WHY

BVS ZOPSZSR µQO`Ra¶ ab`cQbc`S bVS Q]\bS\b W\b] SOaWZg RWUSabWPZS QVc\Ya SOQV ]T eVWQV Wa \]e c\ RS`abO\ROPZS Ob O UZO\QS /Za] bOPa bVS []ab Q][[]\ T]`[ ]T 1O`R AbOQY O`S dS`g TO[WZWO` b] caS`a

HOW

4W`ab USb bVS W\T]`[ObW]\ O`QVWbSQbc`S `WUVb A^ZWb c^ bVS Q]\bS\b W\b] Q]VS`S\b QVc\Ya O\R UWdS bVS[ aV]`b [S[]`OPZS bWbZSa ]\S ]` be] e]`Ra WT ^]aaWPZS @S[S[PS` bVOb WT g]c a^ZWb bVS Q]\bS\b c^ e`]\U caS`a [cab aeWbQV POQY O\R T]`bV PS beSS\ QO`Ra Oa bVSg S\bS` W\T]`[ObW]\ ]` Q][^O`S bVW\Ua 0S YW\R b] g]c` caS`a O\R bSab bVS eOg g]c¸dS ]`UO\WhSR Wb

7T g]c eO\b O\ OZbS`\ObWdS b] 1O`R AbOQY bVOb ZSba ^S]^ZS dWSe be] ]` []`S QO`Ra Ob ]\S bW[S Z]]Y Ob 1Z]aOPZS >O\SZa BVSg R]\¸b VOdS bVS [SbO^V]`WQ ^]eS` ]T bOPa Pcb bVSg QO\ PS _cWbS STTSQbWdS T]` caS`a eV] O`S []bWdObSR b] ZSO`\ V]e b] caS bVS[

# ! 2 $ 3 4! # +

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


EXAMPLES

475C@3 " G]c QO\ R`Oe bOPa W\ O\g \c[PS` ]T eOga O\R bVSg R]\¸b VOdS b] abO`b ]\ bVS ZSTb aWRS BVWa Wa T`][ bVS BVSPO\ ;O^^W\U >`]XSQb eSP O^^ZWQObW]\ ASS Vbb^( bVSPO\[O^^W\U^`]XSQb ]`U

475C@3 " <SbaQO^S W[^]aSa RWTTS`S\b ^VgaWQOZ Q]\ab`OW\ba BVS ÂľbOPÂś Pcbb]\a W\ bVWa aWRSPO` O`S abOQYSR dS`bWQOZZg O\R bVSg []dS T`][ b]^ b] P]bb][ Oa bVS caS` QZWQYa bVS[ a] \]e bVS aSZSQbSR ^OUS OZeOga VOa Wba Pcbb]\ RW`SQbZg OP]dS Wb BVWa Wa O\ W\bS`SabW\U a]ZcbW]\ T]` O Q]\ab`OW\SR dS`bWQOZZg ]`WS\bSR a^OQS 7b ]`WUW\OZZg eOa aSS\ W\ SO`Zg dS`aW]\a ]T DWaW]

475C@3 " 6S`S¸a O\]bVS` W[^ZS[S\bObW]\ ]T O dS`bWQOZ 1O`R AbOQY ]\S bVOb R]Sa\¸b SdS\ ^`SbS\R b] caS bOPa BVWa <WYS eSP O^^ZWQObW]\ VOa g]c QZWQY ]\ bVS ]`O\US V]`Wh]\bOZ PO`a b] aV]e ]\S ^O\S Ob O bW[S

475C@3 " ! A][SbW[Sa O^^ZWQObW]\a caS R`]^R]e\ ZWaba eVS`S bOPa [WUVb VOdS PSS\ caSR BVWa Wa bVS ¾1]^WSa >OUSaœ ^OUS W\ =A F 7\bS`\Sb 3f^Z]`S`¸a ^`W\b RWOZ]U P]f 2`]^R]e\a O`S a^OQS Q]\aS`dW\U O\R OZZ]e Z]\U O\R \c[S`]ca ^OUS \O[Sa Pcb bVS caS` QO\¸b aSS eVOb ]bVS` ^OUSa O`S OdOWZOPZS c\bWZ aVS ]^S\a bVS R`]^ R]e\ ZWab <]bS bVS be] aS^O`Ob]`a OP]dS O\R PSZ]e bVS Q]\b`]Za) O caS` \SSRa bVWa YW\R ]T Q]\bOW\[S\b b] c\RS`abO\R eVOb bVS R`]^R]e\ R]Sa =bVS`eWaS Wb Xcab Z]]Ya ZWYS O\]bVS` Q]\b`]Z \]b O \OdWUObW]\OZ RSdWQS 7b¸a \]b Oa SOag b] caS Oa bOPa

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


CLOSABLE PANELS

475C@3 " " 2`SO[eSOdS` ;F

WHAT

>cb aSQbW]\a ]T Q]\bS\b ]\b] aS^O`ObS ^O\SZa O\R ZSb bVS caS` ]^S\ O\R QZ]aS SOQV ]T bVS[ aS^O `ObSZg T`][ bVS ]bVS`a USE WHEN

BVS`S¸a b]] [cQV abcTT b] ^`SaS\b ]\ bVS ^OUS Pcb g]c eO\b Wb OZZ ]\Zg ]\S QZWQY OeOg BVS Q]\bS\b Wa RWdWaWPZS W\b] QZSO`Zg \O[SR aSQbW]\a Oa eWbV BWbZSR ASQbW]\a O\R 1O`R AbOQY BVS caS` [Og eO\b b] aSS be] ]` []`S Ob O bW[S A^SQW¿QOZZg bVWa Wa O caSTcZ Q]\Q`SbS W[^ZS[S\bObW]\ ]T 3fb`Oa ]\ 2S[O\R 7T g]c¸dS ]`UO\WhSR g]c` Q]\ bS\b caW\U 3fb`Oa ]\ 2S[O\R g]c [Og eO\b b] caS a][S T]`[ ]T 1Z]aOPZS >O\SZ b] V]ZR bV]aS Sfb`Oa WHY

G]c e]cZR caS 1Z]aOPZS >O\SZa W\ [O\g ^ZOQSa eVS`S g]c [WUVb caS O 1O`R AbOQY´Wb¸a O a^OQS aOdW\U RSdWQS bVOb RS^S\Ra ]\ O caS` QZWQYW\U Wb b] USb Ob Wb 6]eSdS` 1Z]aOPZS >O\SZa UWdSa g]c O ZWbbZS []`S ÀSfWPWZWbg(

7b QO\ Q]\bOW\ aSQbW]\a ]T eWZRZg RWTTS`W\U aWhSa 7T g]c caSR O 1O`R AbOQY eWbV aSQ bW]\a ]T dO`W]ca aWhSa bVS a[OZZS` aSQbW]\a e]cZR VOdS ZO`US O`SOa ]T eVWbSa^OQS eVWQV Wa OeYeO`R

BVS caS` QO\ ]^S\ aSdS`OZ aSQbW]\a Ob ]\QS BVOb¸a Sa^SQWOZZg \WQS W\ OcbV]`W\U b]]Za

O\R T]` µ^]eS` caS`a¶ ]T OZZ YW\Ra ]T Q][ ^ZSf O^^ZWQObW]\a´Ob bVS caS`¸a RWaQ`SbW]\ bVSg QO\ aW[cZbO\S]caZg ]^S\ [O\g ^O\SZa O\R YSS^ bVS[ W\ dWSe OZZ bVS bW[S

7T g]c Q`SObS ]\Zg ]\S QZ]aOPZS ^O\SZ O\R S[PSR Wb W\ O ZO`US` ^OUS ]` RWOZ]U P]f bVOb ^O\SZ Z]]Ya ZSaa W[^]`bO\b bVO\ bVS Q]\bS\b Wb¸a S[PSRRSR W\ 7T g]c ^cb P]bV aSQbW]\a W\b] be] bOP ^OUSa V]eSdS` bVSg O^^SO` b] PS ]T S_cOZ W[^]`bO\QS

BVS`S Wa O Q]ab b] caW\U bVSaS ^O\SZa BOP ^OUSa O`S eSZZ c\RS`ab]]R Pg []ab ^S]^ZS Pcb 1Z]aOPZS >O\SZa O`S \]b Oa Q][[]\´bVSg e]\¸b PS TO[WZWO` b] SdS`g]\S Ob ¿`ab CaOPWZWbg bSabW\U Wa `SQ][ [S\RSR 4c`bVS`[]`S bVS OPWZWbg b] ]^S\ [O\g aSQbW]\a Ob ]\QS [Og POQY¿`S Pg [OYW\U bVS S\dW `]\[S\b b]] QZcbbS`SR O\R c\caOPZS HOW

2WdWRS g]c` Q]\bS\b W\b] aSQbW]\a \O[S bVS[ O^ ^`]^`WObSZg O\R ^cb bVS[ W\b] ^O\SZa bVOb O^^SO` O\R RWaO^^SO` eVS\ g]c QZWQY O Pcbb]\ ]` ZW\Y >cb O\ O``]e ^Zca aWU\ b`WO\UZS ]` QVSd`]\ µ,,¶ ]\ bVOb Pcbb]\ ]` ZW\Y´R]W\U a] VW\ba b] bVS caS` bVOb a][SbVW\U eWZZ ]^S\ ]` QZ]aS 7\ [O\g O^^ZWQObW]\a bVS b`WO\UZS ^]W\ba R]e\ b] bVS ]^S\ ^O\SZ eVS\ ]^S\ O\R b] bVS `WUVb eVS\ QZ]aSR) bVSaS O`S a][SbW[Sa bS`[SR µbeWab R]e\a ¶

# , / 3 ! " , % 0! . % , 3

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


7\ []ab O^^ZWQObW]\a eVS`S g]c caS bVWa RSdWQS bVS eW\R]e Q]\bOW\W\U bVS 1Z]aOPZS >O\SZ a U`]ea O\R aV`W\Ya Oa bVS ^O\SZ Wa ]^S\SR O\R QZ]aSR G]c [WUVb OZa] ]` ORRWbW]\OZZg ^cb Wb W\ O aQ`]ZZW\U ^O\SZ ]` W\b] `SaWhOPZS ^O\Sa Oa W\ bVS 2`SO[ eSOdS` SfO[^ZS Ob bVS b]^ ]T bVWa ^ObbS`\ /Za] \]bS bVS caS ]T O 1O`R AbOQY \SabSR W\aWRS O 1Z]aOPZS >O\SZ G]c QO\ caS Wb WT g]c VOdS O dS`g ZO`US \c[PS` ]T aSQbW]\a b] RSOZ eWbV O\R WT bVSg

¿b W\b] O be] ZSdSZ VWS`O`QVWQOZ ]`UO\WhObW]\ S U bVS µ2SaWU\¶ aSQbW]\ Q]\bOW\a acPaSQbW]\a \O[SR µ1AA AbgZSa ¶ µ6B;: AbgZSa ¶ O\R µ0SVOdW]`a¶ BVWa bSQV\W_cS VOa SfWabSR aW\QS Ob ZSOab ''! O\R ^]aaWPZg SO`ZWS` BVS ;]bWT POaSR 5C7 PcWZRS` QOZZSR C7; F caSR QZ]aOPZS ^O\SZa´ SdS\ eWbV bVS beWab R]e\ O``]ea´T]` Wba eWRUSb ^OZSbbSa

EXAMPLES

475C@3 " # BVW\Y[O^¸a DWacOZ BVSaOc`ca Wa O eSP O^^ZWQObW]\ bVOb caSa 1Z]aOPZS >O\SZa BVS Q]Z]`SR bWbZSPO`a RSZW\SObS T]c` aSQbW]\a bVOb g]c QO\ bc`\ ]\ O\R ]TT Ob eWZZ dWO bVS =\ =TT `ORW] Pcbb]\a G]c OZa] QO\ R`OU bVS bWbZSPO`a b] `SaWhS bVS aSQbW]\a BVS caS` USba []`S Q]\b`]Z ]dS` eVOb VS aSSa ]\ bVS W\bS`TOQS´WT bVS T]c` aSQbW]\a [OYS Wb b]] QZcbbS`SR VS QO\ bc`\ ]TT bVS ZSOab `SZSdO\b ]\Sa ASS Vbb^( dWacOZbVSaOc`ca Q][

475C@3 " $ DWacOZ AbcRW]¸a ^`]^S`bg aVSSba caS 1Z]aOPZS >O\SZa b] QObSU]`WhS Wba \c[S`]ca ^`]^S`bWSa Pg b]^WQ / caS` eV] Wa\¸b W\bS`SabSR W\ bVS /QQSaaWPWZWbg ]` /^^SO`O\QS ^`]^S`bWSa T]` W\abO\QS QO\ QZ]aS bVS[ c^ eVWZS aVS Q]\QS\b`ObSa ]\ bVS ]bVS` ^`]^S`bWSa 7\abSOR ]T O b`WO\UZS DWacOZ AbcRW] caSa ^ZcaSa W\ a_cO`Sa Xcab ZWYS bVS EW\R]ea b`SSdWSe Q]\b`]Z 3dS\ bV]cUV bVWa Wa\¸b O b`SSdWSe Wb bOYSa ORdO\bOUS ]T eVOb caS`a OZ`SORg Y\]e( g]c QZWQY ]\ bVS ^Zca b] ]^S\ a][SbVW\U O\R QZWQY ]\ bVS [W\ca b] QZ]aS Wb

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


475C@3 " % 6S`S¸a O\ SfO[^ZS ]T bVWa ^ObbS`\ caSR W\ O eSP ^OUS 4ZWQY` RWa^ZOga a[OZZ RSZWQObS QZ]aOPZS ^O\SZa eWbV SOQV W[OUS aV]eW\U `SZObSR W[OUSa ]` ]bVS` W[OUSa W\ O aS_cS\QS G]c QO\ ]^S\ O\R QZ]aS bVS[ eWbV Pcbb]\a ZOPSZSR eWbV ¾ œ ]` ¾ œ

475C@3 " & BVWa aQ`SS\aV]b ]T /' /[Oh]\¸a [cZbWRW[S\aW]\OZ aSO`QV TOQWZWbg aV]ea bV`SS ]cb ]T O ^]aaWPZS \W\S ^O\SZa 3OQV ^O\SZ Wa O `SaWhOPZS dS`bWQOZ Q]Zc[\´bVS PO`a PSbeSS\ bVS[ O`S R`OUUOPZS a] bVS caS` QO\ eWRS\ ]` \O``]e bVS ^O\SZa Oa \SSRSR BVS Pcbb]\ Q]Zc[\ ]\ bVS `WUVb OQba Oa O Q]\b`]Z QS\bS` ]T a]`ba ZSbbW\U bVS caS` aV]e O\R VWRS dO`W]ca ^O\SZa) Pcb T]` Z]QOZ [OfW[WhW\U O\R QZ]aW\U ]T bVS ^O\SZa be] Pcbb]\ ZWYS ZW\Ya PSaWRS SOQV ^O\SZ¸a bWbZSPO` `SOR ¾IQZ]aSKœ O\R ¾ITcZZK œ BVSg¸`S `SRc\RO\b eWbV bVS QVSQY Pcbb]\ Q]Zc[\ Pcb bVOb¸a ]YOg <]bWQS bVOb bVS bWbZSa ]T bVS /' ^O\SZa R]\¸b `SOZZg abO\R ]cb [cQV BVS`S Wa O dWacOZ VWS`O`QVg ]\ bVWa ^OUS Pcb Wb¸a VO`R b] [OYS ]cb´ ab`]\U bWbZSa e]cZR VOdS VSZ^SR RS¿\S bVS bV`SS ^O\SZa 0]ZRS` T]\ba V]`Wh]\bOZ `cZSa PSZ]e bVS bWbZSa ]` Q]Z]`SR POQYU`]c\Ra e]cZR R] bVS b`WQY 0cb Q]\aWRS` bVWa( WT bV]aS bWbZSa VOR PSS\ ^cb OUOW\ab ab`W^Sa ]T Q]\b`OabW\U Q]Z]` T]` SfO[^ZS bVSg¸R Z]]Y ZWYS OQbcOZ bWbZSPO`a E]cZR\¸b caS`a b`g b] U`OP O\R []dS bV]aS bWbZSPO`a- E]cZR bVOb PS O POR bVW\U WT Wb e]`YSR-

# , / 3 ! " , % 0! . % , 3

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


MOVABLE PANELS

475C@3 " ' ;/B:/0

WHAT

>cb RWTTS`S\b b]]Za ]` aSQbW]\a ]T Q]\bS\b ]\b] aS^ O`ObS ^O\SZa O\R ZSb bVS caS` []dS bVS[ O`]c\R b] T]`[ O Qcab][ ZOg]cb

0cb bVWa YW\R ]T ^S`a]\OZWhObW]\ aSS[a b] O^^SOZ b] ^S]^ZS ]\ a][S ]bVS` ZSdSZ b]] BVSg [Og ^S`a]\ OZWhS W\T`S_cS\bZg dWaWbSR eSP aWbSa bVOb ^`]dWRS S\bS`bOW\[S\b T]` W\abO\QS

USE WHEN

BVS ^OUS VOa aSdS`OZ Q]VS`S\b W\bS`TOQS µ^WSQSa¶ bVOb R]\¸b `SOZZg \SSR b] PS ZOWR ]cb W\ ]\S aW\UZS Q]\¿Uc`ObW]\) bVSW` [SO\W\Ua O`S aSZT SdWRS\b b] caS`a `SUO`RZSaa ]T bVSW` Z]QObW]\ ]\ bVS ^OUS G]c [Og eO\b caS`a b] TSSZ a][S aS\aS ]T ]e\S`aVW^ ]T bVS a]TbeO`S ]` Ob ZSOab VOdS Tc\ ^ZOgW\U eWbV Wb

WHY

EVS\ bVSg O`S e]`YW\U ]\ a][SbVW\U T]` O eVWZS ^S]^ZS ZWYS b] `SO``O\US bVSW` S\dW`]\[S\b b] acWb bVSW` e]`YW\U abgZS BVSg QO\ ^ZOQS \SSRSR b]]Za QZ]aS b] eVS`S bVSg e]`Y) VWRS bVW\Ua bVSg R]\¸b \SSR) O\R caS A^ObWOZ ;S[]`g 1VO^bS` b] `S [S[PS` eVS`S bVSg ^cb bVW\Ua @ObW]\OZZg a^SOY W\U ;]dOPZS >O\SZa VSZ^a caS`a USb bVW\Ua R]\S []`S ST¿QWS\bZg O\R Q][T]`bOPZg W\ bVS Z]\U `c\´ ]\QS bVSg¸dS a^S\b bW[S `SO``O\UW\U Wb b] bVS eOg bVSg ZWYS Wb

HOW

:Sb bVS caS` []dS bVS C7 ^WSQSa O`]c\R bVS ^OUS Ob eWZZ AOdS bVS ZOg]cb T]` bVS \Sfb bW[S bVS caS` `Sac[Sa caW\U bVS a]TbeO`S Sa^SQWOZZg WT Wb¸a O\ W[ ^]`bO\b ^O`b ]T VWa ROWZg ZWTS 2S^S\RW\U c^]\ bVS RSaWU\ g]c¸dS QV]aS\ g]c [Og eO\b b] UWdS bVS caS` T`SSR][ b] ^ZOQS bVSaS ^WSQSa O\geVS`S SdS\ WT bVSg ]dS`ZO^ =` g]c [Og eO\b O ^`SaQ`WPSR ZOg]cb U`WR eWbV µaZ]ba¶ eVS`S ^WSQSa QO\ PS R`]^^SR´bVWa ZSba bVS ^OUS [OW\ bOW\ OZWU\[S\b O\R a][S aS\aS ]T RWU\Wbg eWbV ]cb [OYW\U bVS caS` a^S\R b]] [cQV bW[S ¿RRZW\U eWbV eW\R]ea 7T bVS []dOPZS ^O\SZa `SOQb b] []caS QZWQYa ]` []caS R`OUa acQV Oa T]` bSfb aSZSQbW]\ Q]\aWRS` ^cbbW\U O µVO\RZS¶ ]\ SOQV ^WSQS bVOb bVS caS` QO\ U`OP b] []dS bVS ^WSQS O`]c\R BWbZSPO`a O`S U]]R

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


T]` bVWa 7\ TOQb WT g]c ^cb O\ ÂľFÂś ]\ bVS VO\RZS a][S caS`a eWZZ Q]\QZcRS bVOb bVOb Wa V]e bVSg USb `WR ]T O ^WSQS S\bW`SZg 7T g]c W[^ZS[S\b bVWa ]T Q]c`aS ]TTS` O eOg b] `SQ`SObS bVS ^WSQSa bVOb O`S U]\S

G]c` caS`a [WUVb O^^`SQWObS O ¾@SdS`b b] 2STOcZb :Og]cbœ OQbW]\ a][SeVS`S ]\ bVS C7 WT bVSg USb Q][^ZSbSZg bO\UZSR c^ O\R Xcab eO\b b] abO`b ]dS` EVS\ g]c caOPWZWbg bSab ;]dOPZS >O\SZa eObQV Sa ^SQWOZZg T]` OQQWRS\bOZ ^O\SZ []dSa´O caS` eV] c\W\bS\bW]\OZZg R`OUa O ^O\SZ W\b] O\ ]RR ^ZOQS [Og \]b Y\]e W[[SRWObSZg eVOb VS RWR ]` V]e b] c\R] Wb

EXAMPLES

475C@3 " ! 6S`S EW\O[^ Wa RWaOaaS[PZSR O\R `SO``O\USR

475C@3 " ! BVS bV`SS ^WSQSa bVOb [OYS c^ EW\O[^ QO\ PS VWRRS\ aV]e\ `SO``O\USR SdS\ aS^O`ObSR Q][^ZSbSZg T`][ SOQV ]bVS` O\R []dSR W\RS^S\RS\bZg BVS caS` QO\ []dS O ^WSQS Pg R`OUUW\U Wba bWbZSPO`) bVOb bWbZSPO` OZa] VOa ;W\W[WhS O\R 6WRS Pcbb]\a G]c QO\ P`W\U POQY VWRRS\ ^WSQSa dWO ^]^ c^ [S\c WbS[a 7\ bVWa aQ`SS\aV]b g]c QO\ aSS EW\O[^¸a RSTOcZb Q]\¿Uc`ObW]\

- / 6! " , % 0 ! . % , 3

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


RIGHT LEFT ALIGNMENT

475C@3 " ! >O`b ]T O RWOZ]U P]f T`][ ;OQ`][SRWO 1]\b`WPcbS

WHAT

EVS\ RSaWU\W\U O be] Q]Zc[\ T]`[ ]` bOPZS `WUVb OZWU\ bVS ZOPSZa ]\ bVS ZSTb O\R ZSTb OZWU\ bVS WbS[a ]\ bVS `WUVb

USE WHEN

G]c¸`S ZOgW\U ]cb O T]`[ ]` O\g ]bVS` aSb ]T WbS[a bVOb VOdS bSfb ZOPSZa W\ T`]\b ]T bVS[ BVWa OZa] Q]cZR O^^Zg b] bVS W\bS`\OZ ab`cQbc`S ]T bOPZSa ]` O\g ]bVS` be] Q]Zc[\ ab`cQbc`S W\ eVWQV bVS `]ea aV]cZR PS `SOR ZSTb b] `WUVb

eV]ZS bVW\U bOYW\U ORdO\bOUS ]T Q]\bW\cWbg O\ ]bVS` 5SabOZb ^`W\QW^ZS BVWa ^]eS`TcZ SRUS UcWRSa bVS dWSeS`¸a SgSa a[]]bVZg R]e\ bVS ^OUS ac^ ^]`bW\U O U]]R dWacOZ À]e 7\ a][S ZOg]cba `WUVb OZWU\W\U bVS ZOPSZa Xcab R]Sa\¸b Z]]Y U]]R BVS ZOPSZa [WUVb VOdS eWRSZg dO`gW\U eWRbVa O Q]Zc[\ ]T WQ]\a [WUVb abO\R b] bVS ZSTb ]T bVS ZOPSZa ]` ^S`VO^a ZSTb OZWU\SR bWbZSa aS^O`ObS bVS T]`[¸a aSQbW]\a´OZZ ]T bVSaS T]`[Oba QO\ `cW\ O `WUVb ZSTb OZWU\[S\b bV]cUV \]b \SQSaaO`WZg 5] eWbV eVOb e]`Ya

WHY

EVS\ g]c ^cb bSfb `WUVb \Sfb b] bVS bVW\U Wb ZOPSZa g]c T]`[ O ab`]\U ^S`QS^bcOZ U`]c^W\U ]T bVOb ^OW`´[cQV []`S a] bVO\ WT bVSg eS`S aS^O`ObSR Pg O ZO`US O[]c\b ]T a^OQS 7T g]c OZWU\ dO`WOPZS ZS\UbV ZOPSZa OZ]\U bVSW` ZSTb aWRSa bVS aV]`b ZOPSZa e]\¸b PS QZ]aS S\]cUV b] bVSW` Q]\b`]Za O\R bVS aWRS b] aWRS U`]c^W\U Wa P`]YS\ BVWa Wa bVS 5SabOZb ^`W\QW^ZS ]T ^`]fW[Wbg Ob e]`Y 7\ aV]`b ^S]^ZS []`S SOaWZg Q]\\SQb SOQV ZOPSZ b] Wba Oaa]QWObSR Q]\b`]Z eVS\ bVSg aSS `WUVb ZSTb OZWU\[S\b ;SO\eVWZS g]c aV]cZR OZeOga ZSTb OZWU\ Q]\b`]Za EVS\ Q][PW\SR eWbV bVS `WUVb OZWU\SR ZOPSZa O\R O c\WT]`[ a^OQW\U PSbeSS\ bVS[ bVSg VSZ^ T]`[ O \WQS ab`]\U R]cPZS SRUS R]e\ bVS [WRRZS ]T bVS

HOW

7\abSOR ]T ZSTb OZWU\W\U SOQV bSfb ZOPSZ `WUVb OZWU\ Wb 0`W\U Wb c^ QZ]aS b] Wba Q]\b`]Z aS^O`ObSR Pg ]\Zg O TSe ^WfSZa BVS \Sb STTSQb ^`]POPZg eWZZ PS O `OUUSR c\OZWU\SR ZSTb SRUS´bVOb¸a cacOZZg =9 7T a][S ZOPSZa O`S b]] Z]\U b] [OYS bVWa e]`Y b`g P`SOYW\U bVS[ W\b] [cZbW^ZS ZW\Sa ]` `Sa]`b b] ^cb bW\U bVS ZOPSZa OP]dS bVS Q]\b`]Z W\ eVWQV QOaS bVWa ^ObbS`\ PSQ][Sa W``SZSdO\b BVS\ ZSTb OZWU\ bVS Q]\b`]Za OUOW\ab O\ W[OUW\O`g ZW\S O TSe ^WfSZa OeOg T`][ bVS `WUVb SRUSa ]T bVS ZOPSZa ;OYS bVS[ ^`SQWaSZg OZWU\SR ^WfSZ ^S`TSQb´WT bVSg¸`S \]b bVS Q]\b`]Za eWZZ Z]]Y [Saag BVS Vc[O\ dWacOZ agabS[ Wa `SOZZg U]]R Ob ^WQYW\U ]cb aZWUVb [WaOZWU\[S\ba

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


/UOW\ bVS ]bVS` SRUS ]T bVS Q]\b`]Z Q]Zc[\ [Og PS `OUUSR BVOb¸a \]b a] U]]R WT g]c¸`S RSOZW\U eWbV bSfb ¿SZRa Q][P] P]fSa O\R ]bVS` dWacOZZg ¾VSOdgœ ]PXSQba Oa W\ 4WUc`S " ! B`g b] ab`SbQV

bVS[ a] bVSW` `WUVb SRUSa O`S OZWU\SR b]] b] eVOb SdS` SfbS\b g]c QO\ G]c OZa] QO\ b`g b] OZWU\ bVS aV]`b ]\Sa eWbV ]\S O\]bVS` O\R bVS Z]\U ]\Sa eWbV ]\S O\]bVS`

EXAMPLES

475C@3 " !! BVWa ^ObbS`\ OZa] e]`Ya eWbV ZOg]cba bVOb VOdS \] W\^cb Q]\b`]Za Ob OZZ BVWa ;OQ =A F ORR`Saa P]]Y S\b`g VOa dS`g ZWbbZS eVWbSa^OQS PSbeSS\ bVS be] Q]Zc[\a Pcb bVS RWTTS`S\QS W\ Q]Z]` VSZ^a b] aS^O`ObS bVS[ dWacOZZg <]bWQS bVOb bVS ZOPSZ ÂľV][S ^OUSÂś Wa [cQV Z]\US` bVO\ bVS ]bVS`a) bVWa e]cZR VOdS [ORS O ZSTbVO\R ZOPSZ OZWU\[S\b ZSaa ^ZSOaW\U b] bVS SgS O\R VO`RS` b] `SOR

475C@3 " !" /UOW\ bVS eWRSZg dO`gW\U ZOPSZ ZS\UbVa [SO\ bVOb O ZSTbVO\R ZOPSZ OZWU\[S\b e]cZR ^cb bVS ZOPSZa TO` TO` OeOg T`][ bVSW` `STS`S\ba BVWa Wa SOaWS` b] `SOR

2)'(4 ,%&4 !,)'.-%.4

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


DIAGONAL BALANCE

475C@3 " !# E]`R¸a 5`O^V =^bW]\a RWOZ]U P]f

WHAT

/``O\US ^OUS SZS[S\ba W\ O\ Oag[[Sb`WQ TOaVW]\ Pcb POZO\QS Wb Pg ^cbbW\U dWacOZ eSWUVb W\b] P]bV bVS c^^S` ZSTb O\R Z]eS` `WUVb Q]`\S`a

ac^^]`b bVWa dWacOZ À]e b]] BVS SgS ¿\OZZg Q][Sa b] `Sab ]\ SZS[S\ba `S^`SaS\bW\U eVOb bVS caS` [WUVb R] ZOab ZWYS QZ]aS bVWa C7 ]` U] a][SeVS`S SZaS

USE WHEN

G]c ZOg ]cb O ^OUS ]` RWOZ]U P]f bVOb VOa O bWbZS ]` VSORS` Ob bVS b]^ O\R a][S ZW\Ya ]` OQbW]\ Pcb b]\a´acQV Oa =9 O\R 1O\QSZ AcP[Wb ]` 0OQY O\R <Sfb´Ob bVS P]bb][ BVS ^OUS Wa aV]`b S\]cUV b] ¿b ]\ bVS aQ`SS\ eWbV]cb aQ`]ZZW\U

WHY

DWacOZZg ^`][W\S\b TSObc`Sa acQV Oa bWbZSa bOPa O\R Pcbb]\a aV]cZR Q]\b`WPcbS b] O POZO\QSR Q][ ^]aWbW]\ ]\ bVS aQ`SS\ BVSg¸`S OZ`SORg Ob ]^^]aWbS S\Ra ]T bVS ^OUS) eVS\ g]c ^cb bVS[ ]\ ]^^]aWbS aWRSa b]] bVSg ]TbS\ POZO\QS ]\S O\]bVS` ]cb BVW\Y ]T bVS[ Oa eSWUVba´bVS PWUUS` ]` []`S µQ]\b`Oabg¶ bVS TSObc`Sa O`S bVS VSOdWS` bVSg O`S) bVS QZ]aS` b] bVS SRUS bVSg USb bVS []`S g]c \SSR b] ^cb ]\ bVS ]bVS` aWRS b] Q][^S\aObS 0SaWRSa PSW\U \WQS` b] Z]]Y Ob O RWOU]\OZ POZO\QS OZa] aSba c^ bVS ^OUS a] bVOb bVS caS`¸a SgS []dSa SOaWZg T`][ bVS b]^ ZSTb b] bVS P]bb][ `WUVb´O\ WRSOZ dWacOZ À]e T]` caS`a eV] a^SOY ZSTb b] `WUVb ZO\UcOUSa ASS bVS QVO^bS` W\b`]RcQbW]\ T]` O RWa QcaaW]\ ]T dWacOZ À]e BVS `Sab ]T bVS ^OUS aV]cZR

HOW

>ZOQS bVS bWbZS bOPa ]` a][S ]bVS` ab`]\U SZS[S\b Ob bVS c^^S` ZSTb ]T bVS ^OUS) ^ZOQS bVS Pcbb]\ a Ob bVS Z]eS` `WUVb 1]\bS\b ]T O\g eWRbV U]Sa W\ PS beSS\ 7T bVS Q]\bS\b WbaSZT Q]\b`WPcbSa b] bVS POZ O\QS ]T bVS ^OUS a] [cQV bVS PSbbS`´R]\¸b ^cb b]] [cQV eVWbSa^OQS ]\ ]\Zg ]\S aWRS T]` W\abO\QS 1]\aWRS` eVOb bVS Q]Z]` RWOZ]U P]f OP]dS e]cZR Z]]Y ZWYS WT g]c ^caVSR bVS =9 O\R 1O\QSZ Pcbb]\a b] bVS ZSTb SRUS W\abSOR ]T bVS `WUVb SRUS BVS eV]ZS RWOZ]U e]cZR TSSZ ZSTb eSWUVbSR O\R ^`SQO`W]ca 7\ EW\R]ea bVS ^ZOQS[S\b ]T bVS bWbZS W\ bVS c^^S` ZSTb O\R bVS Q]\dS\bW]\OZ ^ZOQS[S\b ]T Pcbb]\a W\ bVS Z]eS` `WUVb R] bVWa T]` g]c Ocb][ObWQOZZg 7\ ;OQ =A F [O\g SZS[S\ba acQV Oa bWbZS PO`a bOPa O\R OQbW]\ Pcbb]\a O`S QS\bS`SR´a] 2WOU]\OZ 0OZ O\QS Wa [cQV ZSaa Q][[]\ bVS`S 9SdW\ ;cZZSb¸a O\R 2O``SZZ AO\]¸a QZOaaWQ ^`S ESP P]]Y 2SaWU\W\U DWacOZ 7\bS`TOQSa Ac\ ;WQ`]aga bS[a RSaQ`WPSa bVS WRSO ]T RWOU]\OZ POZO\QS( µAg[[Sb`WQOZ ZOg]cba ^`]dWRS¬dWacOZ S_cWZWP`Wc[ Ocb][ObWQOZZg /ag[[Sb`WQOZ ZOg]cba QO\ OQVWSdS

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


S_cWZWP`Wc[ Oa eSZZ Pcb bVSW` bS\aS` []`S R`O[ObWQ T]`[ ]T POZO\QS RS^S\Ra ]\ QO`STcZ [O\W^cZObW]\ b] Q][^S\aObS dWacOZZg T]` RWTTS`S\QSa W\ bVS aWhS

^]aWbW]\ O\R dOZcS ]T [OX]` SZS[S\ba Âś ASS PSZ]e T]` SfO[^ZSa ]T V]e g]c QO\ OQVWSdS bVWa POZO\QS

EXAMPLES

475C@3 " !$ / RWOU]\OZ POZO\QS QO\ e]`Y eWbV bSfb ]\Zg W\bS`TOQSa b]] 7\ bVWa PZ]U S\b`g bVS SgS U]Sa Âż`ab b] bVS c^^S` ZSTb `SORa bVS Q]\bS\b O\R bVS\ Q][Sa b] `Sab ]\ bVS ZW\Ya Ob bVS P]bb][ `WUVb BVSaS ZW\Ya O`S bVS Âľ\Sfb bVW\UaÂś bVS caS` [WUVb eO\b b] R] eWbV bVWa ^]abW\U BVS PZ]U Wa Ob Vbb^( SZSUO\bVOQY Q][

475C@3 " !% :WYSeWaS eWbV VSOdWZg U`O^VWQ C7a BVS T]QOZ ^]W\ba W\ bVS aWbS aV]e\ VS`S O`S bVS Z]U] bVS []dW\U QO` bVS ¾:Sb¸a ;]b]`œ bOU ZW\S O\R bVS RSOZS` Z]QOb]` bSfb ¿SZR Ob P]bb][ `WUVb´OZZ W\ O RWOU]\OZ ZW\S O^^`]fW[ObSZg BVS []bW]\ ]T bVS ^V]b]U`O^V ^caVSa bVS SgS R]e\ O\R `WUVb SdS\ []`S T]`QSTcZZg bVO\ bVS ]bVS` SfO[^ZSa C\R]cPbSRZg bVS RSaWU\S`a ]T bVS aWbS eO\bSR b] S\Q]c`OUS ^S]^ZS b] caS bVS bSfb ¿SZR 7T Wb eS`S Ob bVS P]bb][ ZSTb W\abSOR bVS ^OUS e]cZR Z]aS [cQV ]T Wba ^c\QV O\R bVS bSfb ¿SZR [WUVb USb Z]ab W\ bVS ^OUS ASS Vbb^( [W\WcaO Q][

$)!'/.!, "!,!.#%

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


PROPERTY SHEET

475C@3 " !& DWacOZ AbcRW] ^`]^S`bg aVSSb

WHAT

CaS O be] Q]Zc[\ ]` T]`[ abgZS ZOg]cb b] aV]e bVS caS` bVOb O\ ]PXSQb¸a ^`]^S`bWSa O`S SRWbSR ]\ bVWa ^OUS

USE WHEN

BVS W\bS`TOQS ^`SaS\ba O\ SRWbOPZS ]PXSQb b] bVS caS`´^S`VO^a a][SbVW\U PcWZb W\ O U`O^VWQOZ SRW b]` O RObOPOaS `SQ]`R ]` _cS`g ]` a][S R][OW\ a^SQW¿Q WbS[ ZWYS O QO` ]` O ab]QY ^c`QVOaS BVS caS` \SSRa b] QVO\US bVS ^`]^S`bWSa ]` Obb`WPcbSa ]T bVS ]PXSQb WHY

;]ab caS`a ]T dWacOZ PcWZRS`a O`S TO[WZWO` eWbV bVS Q]\QS^b ]T O ^`]^S`bg aVSSb´O ZWab ]T ]PXSQb ^`]^ S`bWSa ]` aSbbW\Ua aSb T]`bV W\ O ^`SaQ`WPSR ]`RS` SRWbOPZS dWO Q]\b`]Za O^^`]^`WObS T]` bVS ^`]^S`bg bg^Sa acQV Oa bSfb ¿SZRa T]` ab`W\Ua ]` R`]^R]e\a

T]` ]\S ]T [O\g QV]WQSa ESZZ RSaWU\SR ^`]^S`bg aVSSba O`S US\S`OZZg SOag b] caS aW[^Zg PSQOcaS bVSg T]ZZ]e eSZZ c\RS`ab]]R Q]\dS\bW]\a >`]^S`bg aVSSba QO\ OZa] VSZ^ bVS caS` PcWZR O Q]` `SQb [S\bOZ []RSZ ]T bVS ]PXSQba W\ bVS C7 / ^`]^ S`bg aVSSb bSZZa bVS caS` eVOb bVS ]PXSQb¸a ^`]^S` bWSa O`S O\R eVOb dOZcSa O`S OdOWZOPZS T]` SOQV ]T bVS[ Sa^SQWOZZg W\ O^^ZWQObW]\a bVOb [Wf EGA7 EG5 SRWbW\U eWbV ^`]U`O[[W\U acQV Oa 5C7 PcWZRS`a eSP ^OUS PcWZRS`a O\R bW[S POaSR aQ`W^bW\U O\R O\W[ObW]\ b]]Za >`]^S`bg SRWb]`a bVca VSZ^ bVS caS` ZSO`\ V]e b] caS bVS agabS[ /ZbS`\ObWdSa b] ^`]^S`bg aVSSba [WUVb W\QZcRS [S\ca O\R RW`SQb [O\W^cZObW]\ / [S\c QO\ ^`] dWRS OQQSaa b] O a[OZZ VO\RTcZ ]T aW[^ZS P]]ZSO\ ]` ]\S ]T [O\g ^`]^S`bWSa 7T caS`a ]\Zg \SSR b] SRWb O TSe ^`]^S`bWSa T]` O\ ]PXSQb bVS\ O ^`]^S`bg aVSSb [Og PS b]] VSOdgeSWUVb O a]ZcbW]\ / caS`

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


e]cZR \SSR b] P`W\U Wb c^ Z]]Y Ob Wb T]` O T`OQbW]\ ]T O aSQ]\R ¿Uc`S ]cb eVWQV ^`]^S`bg b] SRWb SRWb Wb O\R [OgPS QZ]aS bVS ^`]^S`bg aVSSb OUOW\ BVOb¸a O Z]b ]T e]`Y Pcb bVS ORdO\bOUS Wa bVOb Wb aQOZSa c^ eSZZ 7T bVS caS` QVO\USa O Z]b ]T ^`]^S` bWSa W\ acQQSaaW]\ bVS\ bVOb ^`]^S`bg aVSSb QO\ abOg c^ O\R OdOWZOPZS BVSg OZa] ^S`[Wb OQQSaa b] dOab \c[PS`a ]T ^`]^S`bWSa Ob ]\QS c\ZWYS [S\ca eVWQV ab]^ PSW\U caOPZS eVS\ bVSg USb Z]\US` bVO\ OP]cb SWUVb ^`]^S`bWSa 2W`SQb [O\W^cZObW]\ Wa O RWTTS`S\b O\W[OZ S\bW`SZg 4]` W\abO\QS g]c QO\ R`OU `SaWhS `]bObS ]` ZOgS` U`O^VWQ ]PXSQba ]\ O QO\dOa eWbV \] VSZ^ T`][ Ocf WZWO`g eW\R]ea Ob OZZ´bVOb Q]dS`a O Z]b ]T ^`]^S` bWSa /\gbVW\U bVOb ¿ba W\b] O \WQS dWacOZ [SbO^V]` QO\ SaQO^S bVS \SSR T]` O ^`]^S`bg aVSSb 0cb WT Wb R]Sa\¸b ^`]^S`bg aVSSba PSQ][S \SQSaaO`g BVSg [Og OZa] PS \SQSaaO`g WT a][S caS`a eO\b bVS ^`S QWaW]\ ]T bg^SR \c[PS`a T]` []dS[S\b `]bObW]\ O\R aW[WZO` ^`]^S`bWSa HOW

BVS ]\Zg Q][[]\OZWbg VS`S Wa bVOb bVS dO`W]ca SRWb Q]\b`]Za O`S ZOPSZSR eWbV bVS \O[Sa ]T bVS ^`]^S` bWSa bVSg SRWb EVS\ bVS caS` ¿\WaVSa ¿ZZW\U W\ dOZ cSa bVS \Se ^`]^S`bg dOZcSa O`S e`WbbS\ ]cb b] bVS ]PXSQb BVSaS WaacSa cacOZZg Q][S c^ eVS\ RSaWU\W\U ^`]^S`bg aVSSba( :Og]cb A][S agabS[a caS O be] Q]Zc[\ bOPZS eWbV Q]\b`]Za bVOb O^^SO` eVS\ bVS caS` QZWQYa bVS dOZcSa aV]e\ W\ bVS `WUVbVO\R Q]Zc[\ DWacOZ 0OaWQ aSS[a b] PS bVS RS TOQb] abO\RO`R T]` bVWa O^^`]OQV =bVS`a Z]]Y []`S ZWYS T]`[a ]` RWOZ]U P]fSa bVO\ bOPZSa´bVSg [WUVb VOdS bSfb TWSZRa aWbbW\U \Sfb b] ]bVS` Q]\b`]Za ]` SRW b]`a bVOb O`S aSdS`OZ ZW\Sa bOZZ CaS g]c` XcRU [S\b BOPZSa [WUVb PS []`S `SQ]U\WhOPZS Oa ^`]^S`bg aVSSba Pcb T]`[a QO\ PS TO` []`S TZSfWPZS W\ bVSW` ^`SaS\bObW]\ ]T bVS ^`]^S`bg SRWbW\U Q]\b`]Za´aSS bVS 7ZZcab`Ob]` SfO[^ZS

W\ 4WUc`S " !' T]` O\ Sfb`S[S SfO[^ZS EWbV O T]`[ abgZS ZOg]cb T]` W\abO\QS g]c¸`S \]b Q]\ ab`OW\SR b] caW\U O aW\UZS bOPZS `]e T]` SOQV Q]\b`]Z 4]` [O\g ZOg]cb dO`WObW]\a Q]\aWRS` caW\U @WUVb :STb /ZWU\[S\b >`]^S`bg ]`RS` /Z^VOPSbWQOZ QObSU]`WhSR ]` O\ SOag b] `SOR ]`RS` bVOb ^ZOQSa bVS []ab Q][[]\Zg SRWbSR ^`]^S`bWSa Ob bVS b]^- BVSg OZZ VOdS ORdO\bOUSa AV]`b ^`]^S`bg aVSSba aOg ]` TSeS` ^`]^S`bWSa cacOZZg O`S PSab eWbV bVS []ab Q][[]\ ^`]^S`bWSa ZWabSR TW`ab BVS Z]\US` bVS ZWab USba bVS []`S W[^]`bO\b Wb Wa b] QObSU]`WhS bVS[) Pcb WT O caS` Z]]Ya T]` ]\S ^O`bWQcZO` ^`]^S`bg Pg \O[S bVSg [Og eO\b b] a]`b bVS[ OZ^VOPSbWQOZZg /a OZeOga Wb¸a PSab b] UWdS caS`a O QV]WQS 6]eSdS` g]c¸`S abWZZ `Sa^]\aWPZS T]` ^WQYW\U bVS `WUVb RSTOcZb ]`RS` a] µZSb bVS caS` QV]]aS¶ abWZZ R]Sa\¸b USb g]c ]TT bVS V]]Y :OPSZa DWacOZ AbcRW] O\R ]bVS` ^`]U`O[[W\U S\dW `]\[S\ba ]TbS\ caS aV]`b Q`g^bWQ \O[Sa T]` bVS SRWbSR ^`]^S`bWSa BVOb [Og PS OQQS^b OPZS eVS\ bVS ^`]^S`bWSa `S^`SaS\b \O[Sa bVOb caS`a [WUVb caS ZObS` W\ ^`]U`O[a ]` aQ`W^ba bV]cUV []`S RSaQ`W^bWdS \O[Sa O`S OZeOga PSbbS` Pcb eVS\ bVOb¸a \]b bVS QOaS RSdWaS PSbbS` ZOPSZa CaS bS`[W\]Z]Ug TO[WZWO` b] OdS`OUS caS`a \]b XO`U]\ CaS [cZbW^ZS e]`Ra b] RSaQ`WPS Q][^ZSf bVW\Ua BWS bVS eV]ZS ^`]^S`bg aVSSb W\b] O VSZ^ agabS[ acQV Oa ]\S bVOb aV]ea O RSaQ`W^bW]\ ]T O ^`]^S`bg eVS\SdS` bVS caS` abO`ba SRWbW\U bVOb ^`]^S`bg 1]\b`]Z QV]WQS 7 Q]cZR e`WbS # ^OUSa OP]cb bVWa BVS aV]`b dS`aW]\( [OYS ac`S bVS ^`]^S`bg¸a Qc``S\b dOZcS Wa OZeOga dWaWPZS) QV]]aS Q]\b`]Za b] Q]\ab`OW\ bVS W\^cb Oa [cQV Oa ^]aaWPZS´T]` SfO[^ZS Pg caW\U \]\ SRWbOPZS R`]^ R]e\ ZWaba T]` ]\S ]T [O\g QV]WQSa) caS ^ZObT]`[ ac^^ZWSR abO\RO`R SRWb]`a T]` a^SQWOZWhSR

02/0%249 3(%%4

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


bg^Sa ZWYS Q]Z]`a T]\ba O\R TWZS\O[Sa ASS 1VO^bS` % T]` []`S W\T]`[ObW]\ OP]cb Q]\b`]Z QV]WQS EVS\ b] Q][[Wb bVS \Se ^`]^S`bg dOZcSa ;O\g C7a aW[^Zg c^RObS bVS ]PXSQb eWbV bVS \Se dOZcS Oa a]]\ Oa bVS caS` TW\WaVSa bg^ W\U ]` aSZSQbW\U O dOZcS BVS []`S T]`[ ZWYS ^`]^S`bg aVSSba [Og eOWb c\bWZ bVS caS` RSZWP S`ObSZg Q][[Wba bVS eV]ZS bVW\U acQV Oa Pg QZWQYW\U ]\ O\ µ=9¶ Pcbb]\ 6]eSdS` WT g]c` a]TbeO`S QO\ RSOZ eSZZ eWbV W\abO\b c^RObS U] T]` Wb´Wb UWdSa bVS caS` []`S W[[SRWObS TSSR

POQY OP]cb bVS QVO\US VS Xcab [ORS 7T g]c QO\ ^`]dWRS O\ c\R] [SQVO\Wa[ BVOb eWZZ VSZ^ caS`a POQY ]cb ]T OQQWRS\bOZ ]` c\eO\b SR QVO\USa eVWQV Wa Sa^SQWOZZg W[^]`bO\b eWbV W\abO\b c^RObS µ;WfSR¶ dOZcSa T]` [cZbW^Zg aSZSQbSR ]PXSQba A][S C7a a]ZdS bVWa ^`]PZS[ Pg aV]eW\U \] dOZcS Ob OZZ eVWQV QO\ PS RO\US`]caZg [Wa ZSORW\U WT bVS ^`]^S`bg OQbcOZZg QO\ VOdS \] dOZcS ]` \cZZ ]` bVS S[^bg ab`W\U =bVS`a aV]e Wb eWbV O aS\bW\SZ dOZcS ZWYS O\ OabS`WaY ]` bVS e]`R µ[WfSR ¶

EXAMPLES

475C@3 " !' 7ZZcab`Ob]` O\R >V]b]aV]^ bOYS bVS µT]`[ abgZS¶ ZOg]cb O^^`]OQV b] Wba Z]UWQOZ Sfb`S[S BVWa ¿Uc`S aV]ea bVS ^`]^S`bg aVSSb T]` 7ZZcab`Ob]` beWQS OQbcOZZg 7b Wa P`]YS\ c^ W\b] aSdS`OZ ;]dOPZS >O\SZa bVOb À]Ob aS^O`ObSZg ]\ b]^ ]T bVS e]`Y eW\R]ea) SOQV ^O\SZ Q]\bOW\a ]\S ]` []`S bOP ^OUSa bVOb U`]c^ bVS ^`]^S`bWSa Pg QObSU]`g G]c QO\ VWRS `SO``O\US ]` R`OU bVS bOPa T`][ ^O\SZ b] ^O\SZ 4]` ^]eS` caS`a bVWa RS\aS ÀSfWPZS caS` Q]\¿Uc`OPZS O^^`]OQV e]`Ya eSZZ) Pcb Wb¸a \]b a][SbVW\U g]c e]cZR caS W\ O QOacOZ O^^ZWQObW]\ \]` eWbV caS`a eV] O`S\¸b OZ`SORg Q][T]`bOPZS eWbV a]TbeO`S b]]Za bVWa Q][^ZSf BVS ¿`ab Q]Zc[\ Wa O a\O^aV]b ]T bVS ^`]^S`bg aVSSba eVS\ O aW\UZS ZWUVb PZcS `SQbO\UZS eOa aSZSQbSR W\ bVS e]`Y eW\R]e 7\ bVS aSQ]\R Q]Zc[\ [cZbW^ZS RWdS`aS ]PXSQba eS`S aSZSQbSR´bVWa aV]ea O TSe eOga ]T RSOZW\U eWbV µ[WfSR¶ dOZcSa 1][^O`S bVS[ aWRS Pg aWRS <]bWQS bVOb \] ObbS[^b Wa [ORS b] aV]e Ab`]YS O\R 4WZZ W\ bVS aSQ]\R Q]Zc[\ aW\QS bV]aS ^`]^S`bWSa O`S\¸b SdS\ OdOWZOPZS ]\ OZZ bVS aSZSQbSR ]PXSQba 1]Z]` R]Sa O^^Zg b] OZZ ]T bVS[ V]eSdS` O\R USba `S\RS`SR eWbV _cSabW]\ [O`Ya O\R PZO\Y bSfb ¿SZRa´W\RWQObW\U bVOb bVS a]c`QS ]PXSQba VOdS RWTTS`S\b ¿ZZ O\R SRUS Q]Z]`a 0ZO\Y Q][P] P]fSa OZa] W\RWQObS [WfSR dOZcSa T]` b`O\a^O`S\Qg ]^OQWbg O\R bSfb ZSORW\U dS`bWQOZ a^OQS PSbeSS\ ZSbbS`a

475C@3 " " BVWa aQ`SS\aV]b T`][ bVS FS`]f AbO` aV]ea O dS`g SO`Zg ^`]^S`bg aVSSb A][S bVW\Ua VOdS\¸b QVO\USR O eV]ZS Z]b( \]bS bVS be] Q]Zc[\ ZOg]cb bVS `WUVb ZSTb OZWU\[S\b bVS caS ]T Q]\b`]Za ZWYS bSfb ¿SZRa O\R `ORW] Pcbb]\a O\R SdS\ @Sa^]\aWdS 2WaQZ]ac`S bV]cUV g]c QO\¸b aSS Wb VS`S

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


RESPONSIVE DISCLOSURE

475C@3 " " 4`][ Vbb^( bc`P]bOf Q][

WHAT

AbO`bW\U eWbV O dS`g [W\W[OZ C7 UcWRS O caS` bV`]cUV O aS`WSa ]T abS^a Pg aV]eW\U []`S ]T bVS C7 Oa VS Q][^ZSbSa SOQV abS^

USE WHEN

BVS caS` aV]cZR PS eOZYSR bV`]cUV O Q][^ZSf bOaY abS^ Pg abS^ ^S`VO^a PSQOcaS VS Wa Q][^cbS` \OWdS ]` PSQOcaS bVS bOaY Wa \]dSZ ]` `O`SZg R]\S Oa W\ O EWhO`R 0cb g]c R]\¸b eO\b b] T]`QS bVS caS` b] U] ^OUS Pg ^OUS Ob SOQV abS^´g]c¸R `ObV S` YSS^ bVS eV]ZS W\bS`TOQS ]\ ]\S aW\UZS ^OUS WHY

7\ bVWa ^ObbS`\ bVS W\bS`TOQS OQbcOZZg O^^SO`a b] PS µQ`SObSR¶ W\ T`]\b ]T bVS caS` ]\S abS^ Ob O bW[S /b ¿`ab bVS caS` aSSa ]\Zg SZS[S\ba bVOb O`S \SQSa aO`g T]` bVS ¿`ab abS^ EVS\ bVS caS` bOYSa bVOb abS^ bVS \Sfb aSb ]T SZS[S\ba Wa RWa^ZOgSR W\ ORRW bW]\ b] bVS ¿`ab ]\Sa bVS\ bVS \Sfb SbQ /a bVS caS` aSSa bVS bOaY c\T]ZRW\U RW`SQbZg W\ T`]\b ]T VW[ dWO O Rg\O[WQOZZg U`]eW\U C7 VS QO\ T]`[ O Q]``SQb [S\bOZ []RSZ ]T bVS bOaY []`S _cWQYZg O\R SOaWZg <]\S ]T bVS OeYeO`R Q]\bSfb aeWbQVSa bVOb aS^O`ObS eWhO`R aQ`SS\a W[^]aS SfWab VS`S( bVS

caS`a O`S\¸b gO\YSR ]cb ]T bVSW` e]`YÀ]e W\b] O `WUWR aSb ]T []ROZ aQ`SS\a aV]e\ ]\S Ob O bW[S 4c`bVS`[]`S aW\QS bVS C7 Wa YS^b b]USbVS` ]\ ]\S ^OUS bVS caS` QO\ SOaWZg U] POQY O\R QVO\US VWa [W\R OP]cb SO`ZWS` QV]WQSa /a SOQV abS^ Wa `SR]\S VS W[[SRWObSZg aSSa bVS STTSQb ]\ acPaS_cS\b abS^a BVWa Wa PSbbS` bVO\ Xc[^W\U T`][ ]\S Q]\bS\b abO`dSR eWhO`R aQ`SS\ b] O\]bVS` 4]` ]QQOaW]\OZ bOaYa bVWa RSdWQS QO\ e]`Y PSbbS` bVO\ ^`SaS\bW\U O Q][^ZSf O\R W\bS`ZW\YSR aSb ]T Q]\b`]Za OZZ Ob ]\QS PSQOcaS Wb¸a OZeOga ]PdW]ca eVOb bVS ¿`ab abS^ Wa´O\R bVS \Sfb BVS caS` \SdS` VOa b] bVW\Y b]] VO`R 6]e aV]cZR g]c QV]]aS PSbeSS\ bVWa ^ObbS`\ O\R @Sa^]\aWdS 3\OPZW\U- 7T g]c caS @Sa^]\aWdS 3\ OPZW\U g]c eWZZ ^cb OZZ bVS Q]\b`]Za T]` OZZ QV]WQSa ]\ bVS C7´g]c¸ZZ Xcab RWaOPZS bVS W``SZSdO\b ]\Sa c\bWZ bVSg PSQ][S `SZSdO\b OUOW\ W\ `Sa^]\aS b] bVS caS`¸a QV]WQSa A][SbW[Sa bVOb QO\ [OYS bVS C7 b]] QZcbbS`SR ]` Q][^ZWQObSR Z]]YW\U 7b¸a O XcRU[S\b QOZZ( WT g]c \SSR b] ¿b bVS C7 W\b] O dS`g a[OZZ a^OQS ]` WT g]c bVW\Y b]] [O\g Q]\b`]Za ]\ bVS C7 [WUVb Z]]Y POR ]` [OYS caS`a \S`d]ca caS @Sa^]\aWdS 2WaQZ]ac`S W\abSOR

2%30/.3)6% $)3#,/352%

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


HOW

AbO`b Pg aV]eW\U bVS Q]\b`]Za O\R bSfb T]` ]\Zg bVS ¿`ab abS^ EVS\ bVS caS` Q][^ZSbSa bVOb abS^ aV]e bVS Q]\b`]Za T]` bVS \Sfb abS^ :SOdS bVS ^`SdW]ca abS^a¸ Q]\b`]Za dWaWPZS b] ZSb bVS caS` U] POQYeO`R WT \SQSaaO`g 9SS^ Wb OZZ ]\ ]\S ^OUS ]` RWOZ]U P]f a] bVS caS` Wa\¸b OP`c^bZg ^caVSR W\b] O aS^O`ObS µC7 a^OQS ¶ 7\ [O\g acQV abS^ Pg abS^ RSaWU\a bVS QV]WQSa bVS caS` [OYSa Ob ]\S abS^ OZbS`a bVS `Sab ]T bVS bOaY W S bVS bOaY Wa P`O\QVSR \]b ZW\SO` 4]` W\ abO\QS O\ ]\ZW\S ]`RS` T]`[ OaYa eVSbVS` bVS PWZZ W\U ORR`Saa Wa bVS aO[S Oa bVS aVW^^W\U ORR`Saa 7T bVS caS` aOga gSa bVS C7 R]Sa\¸b SdS\ P]bVS` aV]e W\U S\b`g ¿SZRa T]` Wb =bVS`eWaS bVS`S¸a ]\S []`S abS^ W\ bVS ^`]QSaa O\R bVS C7 aV]ea bVS aSQ]\R aSb ]T S\b`g ¿SZRa eVS\ O^^`]^`WObS BVWa bSQV\W_cS Wa ZSaa acQQSaaTcZ eVS\ caSR b] `ORW QOZZg QVO\US O ^`SSfWabW\U C7 W\abSOR ]T ORRW\U C7 Q]\b`]Za b] O PZO\Y a^OQS @Sab`cQbc`W\U O C7 T`][ c\RS` O caS` QO\ bc`\ VWa aS\aS ]T a^OQS c^aWRS R]e\´Wb¸a dS`g RWa`c^bWdS 0cb eVS\ R]\S W\ O\ ]` RS`Zg O\R ^`SRWQbOPZS [O\\S` Wb ^`]dWRSa O Q][^OQb a^OQS aS\aWbWdS eOg b] ^`SaS\b O eWhO`R b] O caS`

BVS Q]\QS^b ]T `Sa^]\aWdS RWaQZ]ac`S Wa\¸b \Se 7b eOa caSR W\ '& W\ bVS ¿`ab Q][[S`QWOZ E7;> W\ bS`TOQS bVS FS`]f AbO` 7ba RSaWU\S`a Q]\aWRS`SR µ^`]U`SaaWdS RWaQZ]ac`S ¶ O []`S US\S`OZ Q]\QS^b bVOb W\QZcRSa `Sa^]\aWdS RWaQZ]ac`S b] PS O [OX]` RSaWU\ ^`W\QW^ZS( µ>`]U`SaaWdS RWaQZ]ac`S RWQbObSa bVOb RSbOWZ PS VWRRS\ T`][ caS`a c\bWZ bVSg OaY ]` \SSR b] aSS Wb BVca AbO` \]b ]\Zg ^`]dWRSa RSTOcZb aSbbW\Ua Wb VWRSa aSbbW\Ua bVOb caS`a O`S c\ZWYSZg b] QVO\US c\bWZ caS`a W\RWQObS bVOb bVSg eO\b b] QVO\US bVS[ ¶ 7\RSSR 7\ bVS AbO`¸a >`]^S`bg AVSSba T]` W\abO\QS PZO\Y a^OQS eOa `SaS`dSR T]` Q]\b`]Za bVOb e]cZR O^^SO` Oa \SSRSR W\ `Sa^]\aS b] caS` QV]WQSa EVS\ O caS` QV]aS T`][ O aSb ]T dOZcSa W\QZcRW\U bVS e]`R µ=bVS` ¶ T]` W\abO\QS O\ Sfb`O bSfb ¿SZR e]cZR O^ ^SO` T]` bVS caS` b] S\bS` O \c[PS` µ7\ab`cQbWdS 7\bS`OQbW]\( ;OYW\U 7\\]dObWdS 7\bS` TOQSa ASZT BSOQVW\U ¶! Pg :O``g 1]\abO\bW\S O\R :cQg :]QYe]]R RWaQcaaSa bVWa ^ObbS`\ c\RS` bVS \O[S µ>`]U`SaaWdS 2WaQZ]ac`S ¶

8]V\a]\ 8 / Sb OZ µBVS FS`]f AbO`( / @Sb`]a^SQbWdS ¶ 7333 1][^cbS` AS^bS[PS` '&' T`WS\Ra Qc`P]e abO` `Sb`]a^SQb

' ^^ ³ ' ASS OZa] Vbb^( eee RWUWPO`\ Q][

! ASS Vbb^( T]`caS Q][ O`bWQZSa W\ab`cQbWdS Vb[ EXAMPLES

475C@3 " " BVWa SfO[^ZS Q][Sa T`][ O\ W\bS`\OZ O^^ZWQObW]\ Ob <]`bVeSabS`\ ;cbcOZ BVS caS` ¿`ab aSZSQba µBA=¶ T]` @S_cSab Bg^S) bVS O^^ZWQObW]\ bVS\ aV]ea O \Se P]f OaYW\U T]` BA= 7\T]`[ObW]\ EVS\ bVS caS` bVS\ aSZSQba µ2SZSbS 72 ¶ O bVW`R P]f O^^SO`a BVS VWab]`g ]T bVWa caS`¸a QV]WQSa `S[OW\a dWaWPZS ]\ bVS ^OUS 475C@3 " "! <]e VS`S¸a O\ SfO[^ZS ]T R]W\U SfOQbZg eVOb 7 aOWR eOa\¸b O U`SOb WRSO( QVO\UW\U O ^`SSfWabW\U W\bS`TOQS `ObVS` bVO\ ORRW\U bVW\Ua b] Wb 6]eSdS` bVWa SfO[^ZS aSS[a a[OZZ aQOZS S\]cUV b] e]`Y 7b¸a T`][ ;O^PZOab¸a C7 T]` S\bS`W\U bVS a^]b b] PS Z]QObSR ]\ O [O^ 7b aV]ea be] Q]\¿Uc`ObW]\a( ¿`ab T]` O a^SQW¿Q ORR`Saa O\R aSQ]\R T]` O ^ZOQS \O[S eWbV]cb O\ ORR`Saa 3OQV Wa QV]aS\ eWbV O `ORW] Pcbb]\ BVWa RSaWU\ [WUVb VOdS PS\S¿bSR T`][ ¿`ab aV]eW\U \] `ORW] Pcbb]\ aSZSQbSR O\R \] ORR`Saa ]` ^ZOQS \O[S Q]\b`]Za Ob OZZ) eVS\ bVS caS` bVS\ QZWQYa ]\ O `ORW] Pcbb]\ bVS O^^`]^`WObS Q]\b`]Za O`S aV]e\

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


RESPONSIVE ENABLING

475C@3 " "" ;/B:/0 1c`dS 4WbbW\U B]]Z

WHY

WHAT

AbO`bW\U eWbV O C7 bVOb¸a []abZg RWaOPZSR UcWRS O caS` bV`]cUV O aS`WSa ]T abS^a Pg S\OPZW\U []`S ]T bVS C7 Oa SOQV abS^ Wa R]\S USE WHEN

BVS C7 eOZYa bVS caS` bV`]cUV O Q][^ZSf bOaY abS^ Pg abS^ ^S`VO^a PSQOcaS VS Wa Q][^cbS` \O WdS ]` PSQOcaS bVS bOaY Wa `O`SZg R]\S Oa W\ O EWh O`R 0cb g]c R]\¸b eO\b b] T]`QS bVS caS` b] U] ^OUS Pg ^OUS Ob SOQV abS^´g]c¸R ZWYS b] YSS^ bVS eV]ZS W\bS`TOQS ]\ ]\S ^OUS 4c`bVS`[]`S g]c eO\b b] YSS^ bVS W\bS`TOQS abOPZS) g]c¸R `ObVS` \]b Rg\O[WQOZZg `SQ]\¿Uc`S bVS ^OUS Ob SOQV abS^ Oa g]c e]cZR eWbV @Sa^]\aWdS 2WaQZ]ac`S

:WYS @Sa^]\aWdS 2WaQZ]ac`S bVWa ^ObbS`\ bOYSa OR dO\bOUS ]T bVS [OZZSOPWZWbg ]T Q][^cbS` RWa^ZOga b] UcWRS bVS caS` bV`]cUV bVS W\bS`TOQS W\bS`OQbWdSZg BVS caS` bVca USba O QVO\QS b] T]`[ O Q]``SQb [S\ bOZ []RSZ OP]cb QOcaS O\R STTSQb BVS C7 WbaSZT bSZZa VW[ bVS ^]aaWPZS Q]\aS_cS\QSa ]T a][S QV]WQSa( WT 7 bc`\ bVWa QVSQYP]f ]\ bVS\ 7 VOdS b] ¿ZZ W\ bVSaS T]c` bSfb ¿SZRa bVOb Xcab U]b S\OPZSR 4c`bVS`[]`S bVS caS` QO\¸b R] bVW\Ua bVOb e]cZR USb VW[ W\b] b`]cPZS Oa bVS C7 VOa ¾Z]QYSR ]cbœ bV]aS OQbW]\a Pg RWaOPZW\U bVS[ C\\SQSaaO`g S` `]` [SaaOUSa O`S bVca Od]WRSR

2%30/.3)6% %.!",).'

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


HOW

7\ a][S O^^ZWQObW]\a acQV Oa bVS 5C7 W\ 4WUc`S " "" []ab OQbW]\a ]\ bVS C7 abO`b ]TT RWaOPZSR´]\Zg bVS OQbW]\a `SZSdO\b b] bVS caS`¸a ¿`ab abS^ O`S OdOWZ OPZS /a bVS caS` [OYSa QV]WQSa O\R ^S`T]`[a OQ bW]\a []`S RWaOPZSR WbS[a aV]cZR PS S\OPZSR O\R P`]cUVb W\b] ^ZOg 7\ bVWa `Sa^SQb Wb¸a `S[O`YOPZg ZWYS @Sa^]\aWdS 2WaQZ]ac`S aW\QS bVS [OQVW\S a^SQW¿Sa O ^O`bWQcZO` aS_cS\QS bV`]cUV bVS W\bS`TOQS / aW[WZO` ZSaa aS_cS\QS POaSR bSQV\W_cS Wa [cQV []`S Q][[]\ W\ RSaYb]^ C7a /a bVS caS` R]Sa bVW\Ua ]\ bVS W\bS`TOQS QS`bOW\ OQbW]\a ]` aSbbW\Ua PSQ][S W``SZSdO\b ]` W[^]aaWPZS O\R bV]aS OQbW]\a USb RWaOPZSR c\bWZ bVS caS` R]Sa eVObSdS` Wa \SQSa aO`g b] `S S\OPZS bVS[ =dS`OZZ aS_cS\QS Wa\¸b Oa W[^]`bO\b ASS 4WUc`S " "# T]` O\ SfO[^ZS EVS\SdS` ^]aaWPZS ^cb bVS RWaOPZSR WbS[a W\ QZ]aS ^`]fW[Wbg b] eVObSdS` S\OPZSa bVS[ BVOb VSZ^a caS`a ¿\R bVS [OUWQ S\OPZW\U ]^S`ObW]\ O\R c\ RS`abO\R bVS `SZObW]\aVW^ PSbeSS\ Wb O\R bVS RWa OPZSR WbS[a Be] ]T bVWa ^ObbS`\¸a SfO[^ZSa ^ZOQS bVOb Pcbb]\ ]` QVSQYP]f `Sa^SQbWdSZg Ob bVS b]^ O\R ZSTb ]T bVS RWaOPZSR WbS[a eVWQV T]ZZ]ea bVS \Obc`OZ b]^ b] P]bb][ O\R ZSTb b] `WUVb µÀ]e¶ ]T bVS W\bS`TOQS

EVS\ g]c RSaWU\ O\ W\bS`TOQS bVOb caSa @Sa^]\ aWdS 3\OPZW\U ]` @Sa^]\aWdS 2WaQZ]ac`S PS ac`S b] RWaOPZS ]\Zg bVW\Ua bVOb `SOZZg QO\¸b ]` aV]cZR\¸b PS caSR 0S eO`g ]T ]dS`Q]\ab`OW\W\U bVS caS`¸a Sf ^S`WS\QS W\ O\ ObbS[^b b] [OYS bVS W\bS`TOQS T`WS\RZWS` ]` SOaWS` b] c\RS`abO\R EVS\ g]c RS QWRS eVOb b] RWaOPZS QO`STcZZg Q]\aWRS` SOQV RS dWQS( Wa Wb RWaOPZSR T]` O `SOZZg U]]R `SOa]\- 1O\ g]c ]TTS` bVOb Tc\QbW]\OZWbg OZZ bVS bW[S- /a cacOZ caOPWZWbg bSabW\U UWdSa caS`a O QVO\QS b] bSZZ g]c bVOb g]c¸dS R]\S Wb e`]\U /\]bVS` caOPWZWbg ^`]PZS[ b] Od]WR Wa eVOb 0`cQS B]U\OhhW\W QOZZa bVS µ;gabS`W]caZg 2W[[SR ;S\c 7bS[a¶"´eVS\ bVS RSaWU\ ]TTS`a \] QZcS Oa b] eVg O UWdS\ RSdWQS Wa RWaOPZSR /UOW\ [W\W[WhS bVS aSb ]T bVW\Ua bVOb VOdS b] PS RWaOPZSR Sa^SQWOZZg eVS\ bVSg¸`S TO` OeOg T`][ eVObSdS` ]^S`ObW]\ bc`\a bVS[ ]\ /Za] a][SeVS`S ]\ bVS W\bS`TOQS ]` W\ Wba VSZ^ agabS[ bSZZ bVS caS` eVOb QOcaSa O TSObc`S b] PS c\OdOWZOPZS /UOW\ bVWa eV]ZS ^`]PZS[ QO\ PS Od]WRSR []`S SOaWZg eVS\ bVS RWaOPZSR Q]\b`]Za O`S\¸b [S\ca ]\ O [S\c PO` Pcb W\abSOR aWb ]cb ]\ bVS [OW\ C7 Q]Z]QObSR eWbV eVObSdS` aeWbQVSa bVS[ ]\ A^ObWOZ ^`]fW[Wbg Wa O\ W[^]`bO\b QZcS

" ASS µBS\ ;]ab EO\bSR 2SaWU\ 0cUa ¶ Ob Vbb^( eee OaYb]U Q][ 0cUV]caS ;]abEO\bSR2SaWU\0cUa Vb[Z

EXAMPLES

475C@3 " "# BVS ;OQ =A F AgabS[ >`STS`S\QSa ^`]dWRS O bg^WQOZ SfO[^ZS ]T RWaOPZW\U POaSR ]\ O PW\O`g QV]WQS( aV]cZR =A F aV]e bVS RObS O\R bW[S ]\ bVS [S\c PO` ]` \]b- 7T bVS caS` QV]]aSa b] aV]e Wb bVS\ aVS USba O ^O\]^Zg ]T QV]WQSa OP]cb V]e Wb ]cUVb b] PS aV]e\ 7T \]b bVS QV]WQSa O`S W``SZSdO\b a] bVSg¸`S RWaOPZSR BVWa PSVOdW]` ^Zca bVS W\RS\bW\U ]T bVS ]^bW]\a c\RS` bVS QVSQYP]f bSZZa bVS caS` bVOb bVSaS QV]WQSa OTTSQb bVS RObS bW[S RWa^ZOg eVWQV bVS QVSQYP]f b]UUZSR´O\R \]bVW\U SZaS

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


475C@3 " "$ G]c OZa] QO\ `SdS`aS bVS aS\aS ]T bVWa ^ObbS`\ O\R R] ¾`Sa^]\aWdS RWaOPZW\U œ BVS \OdWUObW]\ agabS[ caSR W\ B]g]bO¸a >`Wca O\R :Sfca QO`a S[^Z]ga bVWa bSQV\W_cS eVS\ O caS` S\bS`a O RSabW\ObW]\ ORR`Saa 9\]eW\U eVOb ab`SSba SfWab W\ O UWdS\ aSO`QV O`SO bVS agabS[ \O``]ea R]e\ bVS ^]aaWPZS ab`SSb \O[Sa eWbV SOQV acQQSaaWdS ZSbbS` S\bS`SR Pg bVS caS` 7b bVS\ RWaOPZSa bVS ZSbbS`a bVOb QO\¸b ^]aaWPZg T]ZZ]e bVS Qc``S\bZg bg^SR ab`W\U) bVS caS` VOa TSeS` Pcbb]\a b] bVW\Y OP]cb ^Zca a][S Oaac`O\QS bVOb bVS agabS[ ¾Y\]eaœ eVOb bVSg¸`S b`gW\U b] bg^S /RR`Saa S\b`g Wa bVca [ORS SOaWS` O\R []`S ^ZSOaO\b EVS\ ]\Zg O TSe `S[OW\W\U ab`SSba [ObQV bVS agabS[ bOYSa OeOg bVS YSgP]O`R OZb]USbVS` O\R aV]ea bVS ab`SSba Oa O ZWab ]T QV]WQSa´aSS bVS /cb]Q][^ZSbW]\ ^ObbS`\ W\ 1VO^bS` # ASS Vbb^( ZSfca Q][ []RSZa `fMVgP`WR W\bS`W]` Vb[Z´bVS a]c`QS ]T bVSaS aQ`SS\aV]ba´T]` O RS[]

2%30/.3)6% %.!",).'

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


LIQUID LAYOUT

475C@3 " "% 4`][ Vbb^( eW`SR Q][

WHAT

/a bVS caS` `SaWhSa bVS eW\R]e `SaWhS bVS ^OUS Q]\bS\ba OZ]\U eWbV Wb a] bVS ^OUS Wa Q]\abO\bZg µ¿ZZSR ¶ USE WHEN

BVS caS` [WUVb eO\b []`S a^OQS´]` ZSaa´W\ eVWQV b] aV]e bVS Q]\bS\b ]T O eW\R]e RWOZ]U P]f ]` ^OUS BVWa Wa ZWYSZg b] VO^^S\ eVS\SdS` O ^OUS Q]\bOW\a O Z]b ]T bSfb Oa W\ O eSP ^OUS ]` O VWUV W\T]`[ObW]\ Q]\b`]Z ZWYS O bOPZS ]` b`SS ]` O U`O^V WQ SRWb]` 7b R]Sa\¸b e]`Y Oa eSZZ eVS\ bVS dWacOZ RSaWU\ `S_cW`Sa O QS`bOW\ O[]c\b ]T aQ`SS\ `SOZ Sa bObS O\R \] []`S ]` ZSaa

WHY

C\ZSaa g]c¸`S RSaWU\W\U O µQZ]aSR¶ C7 ZWYS O YW]aY O VO\RVSZR ]` O TcZZ aQ`SS\ dWRS] UO[S g]c QO\¸b ^`SRWQb bVS Q]\RWbW]\a c\RS` eVWQV bVS caS` dWSea g]c` C7 AQ`SS\ aWhS T]\b ^`STS`S\QSa ]bVS` eW\ R]ea ]\ bVS aQ`SS\ ]` bVS W[^]`bO\QS ]T O\g

^O`bWQcZO` ^OUS b] bVS caS`´\]\S ]T bVWa Wa c\RS` g]c` Q]\b`]Z 6]e bVS\ QO\ g]c RSQWRS bVS ]\S ]^bW[OZ ^OUS aWhS T]` OZZ caS`a- 5WdW\U bVS caS` O ZWbbZS Q]\b`]Z ]dS` bVS ZOg]cb ]T bVS ^OUS [OYSa g]c` C7 []`S ÀSfWPZS c\RS` QVO\U W\U Q]\RWbW]\a 7b OZa] [Og [OYS bVS caS` TSSZ ZSaa O\bOU]\WabWQ b]eO`Ra bVS C7 aW\QS VS QO\ PS\R Wb b] ¿b VWa W[[SRWObS \SSRa O\R Q]\bSfba 7T g]c \SSR []`S Q]\dW\QW\U Q]\aWRS` eVOb VO^ ^S\a b] O ¿fSR ZOg]cb µ\]\ ZW_cWR¶ C7 eVS\ bVS ZO\UcOUS ]` T]\b aWhS QVO\USa 2] Q]Zc[\a abWZZ ZW\S c^- 2] ^OUSa acRRS\Zg PSQ][S b]] eWRS ]` SdS\ QZW^^SR Ob bVS [O`UW\a- 7T \]b U`SOb) g]c VOdS O aW[^ZS O\R `]Pcab RSaWU\ 0cb ^OUSa S\UW\SS`SR b] e]`Y \WQSZg eWbV eW\R]e aWhS QVO\USa US\S`OZZg OZa] OQQ][[]RObS ZO\UcOUS ]` T]\b aWhS QVO\USa

HOW

;OYS bVS ^OUS Q]\bS\ba Q]\bW\c]caZg µ¿ZZ¶ bVS eW\ R]e Oa Wb QVO\USa aWhS ;cZbWZW\S bSfb aV]cZR e`O^

/ 2 ' ! . ) : ) . ' 4 ( % 0! ' %

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


Ob bVS `WUVb [O`UW\ c\bWZ Wb PSQ][Sa bS\ b] beSZdS e]`Ra eWRS []`S ]\ bVOb ZObS` B`SSa bOPZSa U`O^Va O\R SRWb]`a Ob µQS\bS` abOUS¶ aV]cZR S\ ZO`US US\S`]caZg eVWZS bVSW` [O`UW\a abOg Q][^OQb 7T bVS ^OUS VOa O\gbVW\U T]`[ ZWYS ]\ Wb V]`Wh]\bOZ ab`SbQVW\U aV]cZR QOcaS bSfb ¿SZRa b] SZ]\UObS´ caS`a eWZZ O^^`SQWObS bVWa WT bVSg \SSR b] S\bS` O\g bVW\U Z]\US` bVO\ bVS bSfb ¿SZR¸a \]`[OZ ZS\UbV :WYSeWaS O\gbVW\U aQ`]ZZSR acQV Oa ZWaba O\R bO PZSa aV]cZR ZS\UbVS\ O\R cacOZZg eWRS\ b]] ESP ^OUSa O\R aW[WZO` C7a aV]cZR OZZ]e bVS P]Rg Q]\bS\b b] ¿ZZ bVS \Se a^OQS eVWZS YSS^W\U \OdW UObW]\OZ RSdWQSa O\R aWU\^]aba O\QV]`SR b] bVS b]^ O\R ZSTb [O`UW\a 0OQYU`]c\R Q]Z]`a O\R ^Ob bS`\a OZeOga aV]cZR ¿ZZ bVS \Se a^OQS SdS\ WT bVS Q]\bS\b WbaSZT QO\\]b EVOb VO^^S\a eVS\ bVS eW\R]e USba b]] a[OZZ T]` Wba Q]\bS\b- G]c Q]cZR ^cb aQ`]ZZPO`a O`]c\R Wb =bVS`eWaS eVWbSa^OQS aV]cZR aV`W\Y Oa \SQSaaO`g) ]cb`WUVb QZW^^W\U [Og ]QQc` eVS\ bVS eW\R]e USba `SOZZg bW\g Pcb bVS []ab W[^]`bO\b Q]\bS\b VO\Ua W\ bVS`S b] bVS S\R

7T g]c RSOZ eWbV ^O`OU`O^Va ]T bSfb `S[S[PS` bVOb bVSg PSQ][S \SO`Zg WZZSUWPZS eVS\ bVSg¸`S b]] eWRS 5`O^VWQ RSaWU\S`a bO`USb O\ ]^bW[OZ ZW\S ZS\UbV T]` SOag `SORW\U ]T bSfb) ]\S [Sb`WQ Wa b] OdS`OUS 3\UZWaV e]`Ra ^S` ZW\S /\]bVS` [Sb`WQ Wa ! b] !# S[ eWRbVa´bVOb Wa bVS eWRbV ]T g]c` T]\b¸a Z]eS`QOaS µ[¶ EVS\ g]c` bSfb USba [cQV eWRS` bVO\ bVOb caS`a¸ SgSa VOdS b] b`OdSZ b]] TO` T`][ bVS S\R ]T ]\S ZW\S b] bVS PSUW\\W\U ]T bVS \Sfb ]\S) WT Wb USba [cQV \O``]eS` Wb¸a b]] QV]^^g b] `SOR SOaWZg BVOb aOWR bVS`S Wa SdWRS\QS bVOb bSfb eWbV O Z]\US` ZW\S ZS\UbV acQV Oa QVO`OQbS`a ^S` ZW\S Wa TOabS` b] `SOR bVO\ aV]`bS` ZW\Sa SdS\ bV]cUV caS`a ^`S TS` b] `SOR ZW\Sa TSeS` bVO\ ## QVO`OQbS`a Z]\U # / eSZZ PSVOdSR :W_cWR :Og]cb QO\ PS RWT¿QcZb b] W[^ZS[S\b W\ Q][^ZSf eSP ^OUSa Sa^SQWOZZg WT g]c eO\b b] RWa^S\aS eWbV bOPZSa O\R caS ab`OWUVb 1AA 7b¸a OZa] VO`R W\ DWacOZ 0OaWQ O\R DWacOZ 1 ]` eOa Ob ZSOab T]` O Z]\U bW[S 6]eSdS` 8OdO ^`] dWRSa aSdS`OZ ZOg]cb [O\OUS`a g]c QO\ caS b] W[ ^ZS[S\b Wb %XAMPLE

# ASS µCaS @SORW\U >S`T]`[O\QS ]` CaS` >`STS`S\QS ¶ Ob Vbb^( caOPWZWbg U]d UcWRSZW\Sa

EXAMPLES

475C@3 " "& ;OQ =A F OZZ]ea g]c b] `SaWhS bVS abO\RO`R µ=^S\¶ RWOZ]U P]f eVWQV caSa O ZW_cWR ZOg]cb BVWa Wa U]]R PSQOcaS caS`a QO\ aSS Oa [cQV ]T bVS ¿ZSagabS[ VWS`O`QVg Oa bVSg eO\b `ObVS` bVO\ PSW\U Q]\ab`OW\SR b] O bW\g ^`SRSbS`[W\SR a^OQS BVS 1OaQORW\U :Waba ^ObbS`\ Wa W\ bVWa RWOZ]U P]f b]]

, ) 1 5 ) $ , !9 / 5 4

Excerpted from the book, "Designing Interfaces: Patterns for Effective Interaction Design", by Jenifer Tidwell, published by O'Reilly Media Inc. ISBN 0-596-00803-1. Copyright 2005. Used by permission.


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.