Your SlideShare is downloading. ×
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Designing Web2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing Web2

1,948

Published on

Luke W Oct2007

Luke W Oct2007

Published in: Technology, Design
3 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,948
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
61
Comments
3
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. DESIGNING FOR WEB 2.0 LIKE Wl! OH. EWSKt VOODRAQI-. OCTOIIII 3007 Yahoo! he. - sonloc Principal. Product location A Dosbgn Lulnew mama Dectms 0 Ptincjnl I Foundot - Pooduct ($0990 a strategy sorvncos Author - S-to-seeing: A visual Approach to web Usablltty (Wiley I Sons) - Upcoming: Best Practices for Form Design (Rosenleld Media) - Fulct-on-no Fotm Web applications. product strategy. 8 Interface design articles Previously - eBay Inc, Lead Deslgnev - Unwevslty of Ilmols. Instvuctov - NCSA. Senlov Designer http: //www. lukew. com
  • 2. ‘lnolt around leserlshly foc anything that Is interesting or vaguely teaemhlee what you are looking for. and is dicicnble. " -Stew: Km; HIM? H! DESIGN POI- YME IIEALIYV. .. _A_| - . .. .2 V». ..-. a,n I', "rz -. I¢' A I. ~ rt) -; r~; .a- rvvrihvfl-' . .. p -A um n: ~ ~ nut. ‘J 1.1 . .-; J|'¢ LUHELU . ..n-. -. .u. IJ
  • 3. Design Considerations - Presentation: How your application appears to your audience - interaction: How your application behaves in response to user actions - Orqanization: The structure of you' application The End Goal - Quickly Communicate - What this-'—’ - How 00 I use '5?’ - ‘v"h; .' _'1hCJU «:1 l »; :y. re’-' LIJ HELL! mu. -—. -u . »c an
  • 4. videoegg The easiest way to get your video online. SO WHAT IS DIFFERENT / B()U1'VVEB.2JD? 1.-HHE.
  • 5. WEB 2.0 SHIFTS LOCOMOTION *> SERVICES PAGES RICH INTERACTIONS SITES Ev CONTENT EXPERIENCES WEBMASTERS : ' EVERYONE WEB 2.0 SHIFTS LOCOMOTION *9 SERVICES PAGES RICH INTERACTIONS SITES Ev CONTENT EXPERIENCES WEBMASTERS Z’ EVERYONE
  • 6. WAYS WE INTERACT WITH THE WORLD: 0 Locomotion - Conversation 9 W VII! In En! El yuan III Iii Ideas! bfup I-It ‘cwltrrvlwolcrrurq. IIIU coir. Ilelvooddlaulliebavcee C been unwound rnlwerolsteflua vmwesliocaiee thufslie teclimluves to Ashton-Tote, Necrened-e. him! an otters as . ‘ ‘ alum sollware ans rm maelndofvam Mo mevnmstr In ggn_g1mnastiemnnuueormwcialsmwavellr: sye,1'° aaluangggnnngmhupuwnehaarmnguim . ,_ jineeuwewtelonuxmun (vubunr. mnunmrde-cu j ‘t-danuiunlnietuuu en: -nnngludutordppuihnm-g "" poct<dep vunot Wham; too not eecrute rucuwu r 3*»- stavt-io :36 rain mm the nut: deem: -. she created aouu ; . "0" WN°6“°. ""4‘°*9 Ioutlaoolx and -anus succevwi imut oonoerrm grooms an. . . u I. L to digital representations 0 p ys ca entitles - Directories & portals, Yahoo! - Company sites & brochure-were 2. Digital manipulation of physical goods - E-commerce everywhere - Amazon. eBay 3. Digital services Enable conversation & manipulation Display surfaces Content creation Aggregation Entertainment LL. -flu --yp- tr mama --mu. vow cm. VAI-00.
  • 7. MEANINGFUL PACKAGING DESIGN saoumc-a FOR WEB APPLICATIONS BACK OF PACK UNPACKING EXPERIENCE DIFFERENTIATE SHOUTING ATTRACT EMBODY THE BRAND
  • 8. Wiki software providers 'Rl~. ‘R. ..§ Xjllflliuflf In-nun. -¢«aeu-some flue hvcurlvilhufll [III (1 “Will '3 '1 swoon: Damien uuw en. -I-tor -gave! » tan an-Cline AMIGO lone-I --out-uavwprvnr up-en-0 our -in fllitiii CUIIOBI Chi &IUIIl nn. n.. .4.. .-guru -Irn'co~Int~iqvI'I§—r -zemnna-now can -no -ennui-ca-a we-no-can hi: nin- no-on-aruu--taco -O-no-vfirgou
  • 9. SUPPORT THE STORY BACK OF PACK OUTLINE BENEFITS 8: FEATURES LLI-lEI. .l. l muck: have
  • 10. 1.. ‘cm ‘FTAHOO! I . ... -ml. , . ‘. ‘:i-cl finally. a Wild ha‘. is as easy to use as : worllpruessor . .--. v- x. ..-«>-. .g. ..x. -i us, '1 tAhflVIWIleoI~ . ... _ . .5‘ ——-. .. . . . . ., .». ' . .. Qnu-In-DMOQQ Wd‘| ‘CCuv'VVf>rV~§Ipr’n . -.—. ..-v. . an-can . -um‘. .1: . .‘/ -. . . V-. V-lr-v , . -. -u-nu-n-luo sun. - . —.. ... ..», ..‘.4.. - -. .-- ltvI'wo<e0b-I>~ . ... , . . . .,. . -. »—. ..-l. .«-A-o». .--. u.»r«-. u. r.. —.. — _ M, p_‘ L‘ r r B 2‘. .. . ,., .. cu -:4‘: -mi 1' m may-m - , ::, .1-. ... .. 13 am. V u. r._, is o. ,.. r. ... , .,, .. . .. V —__Y_. _, V. . . . l , V , .. ., . . , . l4i, - . i . « . . . ,. . . . . D-uenrr noon’ T 10
  • 11. ', -,Ht AL” no: xmmai-. -. Lhulunnltld -- - Lt 2: . -.. ... ..~ In -10! on 1.. . H savanna g x -- 1 -. .. u an Thu--r Ila-lam 7| x . . T ~. . T , -. T L. . ..>-av. .. -———j In Te9'fiUII. fiIFl: O L] ' -nu hghvenlr ; I-. .l. ,.T, mu I 1 n. I.. t_nn. gz. .:u~ ' woe A limo: Nun» loar Nu: Cdt-use: In a ['1 use ieuunr urn Tue . . . Vl"VI‘ . T. , lilo iv-em-nu UNPACKING EXPERIENCE n-' r. »n, r«4-. -,-a. -n<4- . ,u. -. - -’IB4"‘i. ‘r1,'l“l mu-new sects
  • 12. $3:'Il ’” a—n- —-use-—. ~.——. . u—. —-. ——-. —r—. —. . u—-— --. --—-. -—-u. - . —.-. »q-_. ... ... ..-— I i—--. ..—. ._. ... .- ' tenan- ‘, ) om: mebrv-bur mom? in“: out sarne rneoa I2
  • 13. — — ————— —» u -: L . .. _ . _.-. ... . ‘:1’ all Create your family tree and slay '1‘.3uu: i1 Wu Iona T Vi-1 I-tom Ilflllfiore L_. - . ._. 13
  • 14. LOCOMOTION —> SERVICES 0 Design considerations - Meaningful shouting - Back of pack messaging - lmpactful unpacking experiences WEB 2.0 SHIFTS LOCOMOTION *> SERVICES PAGEST’ RICH INTERACTIONS SITES T CONTENT EXPERIENCES WEBMASTERS : ’ EVERYONE
  • 15. Trsdfluld Va lrbrctnrr nner Amer Screen iboca Ilene -J: -out Llllirlernttiar — — Uuur Adir Dela LKXIII I-I-! HE. !J. -4 Pick Up at the Store xv ( -, Ir. ir‘ 'ir: Ju tr: IlJ‘II«IIQlr" I SCOTT DESIGNING FOP A. AX
  • 16. Drag and Drop. Drag and Drop Modules. in Page Editing. In Page Custom Editing. Direct state Editing. Grid Cell Eciting. Inline custom Editing. lnline Tag Editing. Popup Custom Editing. Slide-out Custom Editing. lnllne Text Editing. Persistent Portals. lnline Reorderlng. Indcatlon. Busy Indcation. Cursor Buy. It context Busy. I-Iceman Progress. inline Status. Amoconoleoe. Balloon Error Tip. Deferred Content Loading. Dynamic Goal. Narrowing Choices. Retiring Seach. Live Search. Dynamic Filter. Imitation Cursor Imitation. Drop Invitation. Tool Tip Invitation. l-lover lwhetlon. Detalloom. Opecly Focus. Configurable Module - Faceplate. configurable Module - Flip tt. Configurable Module - Inline Configure. Configtlable Module - Slide out Drawer. slide Out. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. lniine Assistant. Inllne Validation. Validate Then Suggest. Onoemandnefresn. Perlodcnetreettneslutilellouiles. Scrolhg Modules. Auto Save. In Context Tools. Remembered Collection. Remembered Preferences. Auto Form Fill. Rating an Object. Transition. Briditen Transition. Cross Fade Tramliont Din Trufioa Expand Transition. Fade In Transition. Fade Out Transition. Fb Transition Movefianaltlon. self-I-iealhg Hutton Colqaae Transition. slide Translion. Rich Internet Object. Available selected. IILI. SCOTT DIZNING FOR AJAX ~-min. -< - VIeseape$)r“: MT vamp - 7- "1 - an cw-an-us Q ‘ gang‘ - >Ih——-can-nu u-one-1-II 0 I ua-an-avian-no ' . . I-. r1u -. r 3:13: INVITATION ‘Tf. t1t. -.. , TRANSITION , _,, ____, ‘, FEEDBACK XQQIW ijlljfiofifl , ,,____,4 ~~ — —» ~— » ——— ——i—— . betearvvcuwp wnqwwron vxuuuula-ax-nr: o1ugI I“ uvourruran assent iurva uxdbl 53%! I6
  • 17. - Rcpcatablc design solutions to common problems - Work "positlvi: -ly" for specific problems in specific DESIGN PATTERNS Context-S - Capture best practices that solve real user needs ° Between principles 8. guidelines - A GCSIQI1 vocabulary 3-. ’ SHARING BEST PRACTICES "“‘1.*""‘1‘ lulu a‘ 'r". i-st’-i: nanny -. _.—. .u— 1 . ' up-cu -ms cm». 3 «my. -. -v .5.-. _ l7
  • 18. PAGES S» RICH INTERACTIONS 0 Design considerations Invitation: communicate potential Transition: illustrate manipulation Feedback: success. progress. errors Design patterns WEB 2.0 SHIFTS LOCOMOTION *> SERVICES PAGES RICH INTERACTIONS SITES T9 CONTENT EXPERIENCES WEBMASTERS ** EVERYONE
  • 19. _: _' . . . . . .. ... e_. __. - dlgg hits one mllln registered users -3/o7 - Display surfaces 0 Myspace number one site in page views -I2/O6 - Entertainment - 100+ million daily streams on YouTube -6/O6 Accessing Content - Content Aggregators: Digg. Delicious. etc. fihhallunl '1 uuunnulolnau-Ilifiuésltbbon-IIIIII -an-but uuunuuun-u-mun-tau E lj Iillmjlliflfi ‘lfiX&QjC1DQIi'Uf1I jIO‘iF. ‘f'. ¢‘flO‘ an-in-an naught: -nun--rout-ypoauuu-nap--vomuvunq ‘-‘ Mun Iuunnwonuou-nlnnvuuunncnulonluiuauunonuv canooununon: Insane nn. uq~-unnn. o«IxQ I-Idlu -——c— uuzzzn
  • 20. Accessing Content - Disolay Surfacu: -5: Fact-oook, i‘-1ySoacc. -rtc 7-‘-. sq. m-—'- —n‘ sun sud "‘ . ... . I: '~-~-- 1‘. " ) Accessing Content - Content Creation Sites, Biogs, ‘. "."ik-is ian ‘, _3,. * "-1 - Primary 8: Secondary Actions in Web Forms
  • 21. Accessing Content - Search - Communication: Email. Instant Messenger. etc. i" T. ‘inc 1:: in. -sg_-g: .ei. =_. -.. EEa. ... ... ... ... ... ... .. i - III « h—- 2: I1:-nbnufisl u-— noun Hui Xij 1 m$f1—X$l v. and Rrflilunliuuti-Uloivnbvtfiiflelvvfiiubhfll jpnitplfinnhxng C0-I-an-aflapnovivl -na 21
  • 22. 't--5141‘ Content 24% CONTENT 76% SITE OVERHEAD I, IINr[g. [I| IKI: ‘flIi| Iii« I :1: . “n : <_IIV: Jg_‘I . _ _. .-_', .‘v. «.. «., ., V’ ‘I ‘-(‘I {.1 , ‘ _ «I F4 i _ > _ u ' mun‘ Z ; .._1u. .u. ' -I. .L. ,». . ’ —, =' I . ,.‘, _ -. .. - I . _ ; ,‘€'~‘~: ,1 r~L- -, -,I -. ‘_'_ '3 < r ,1‘
  • 23. m. .—-x an -. —p-. _.. nn—-u . . - ¢. -_-. .:-—. —<-—n. ——s- In-&n; n-on-are-no-o-. -no. no-. .-c. .-. ~-. - -. .—. .a. ——¢. - n. .. -1- -——m—. u-unq- . ... ... .._. .. use-a_—-. .-—-——-an . ... ~, -. ..u. —.-—-. -.-cu. -4-. _ ‘ . %.. .. . ... _-. _.. .-. -. u-—a. u-n o-—— arc-—n-.5 , _ ____ --. ._-. ..g—. ,.. ..—. -. ._ --—~. ~—. --noun-on -: —-sq-gusto. -9-. ‘- -~. ... ... ... .~—_—. - For most web sites. a few pages get the most attention loovaontyvlnh 10(1): ' I1 m: III III: 5 (0: - Why hamper their experience because of the rest? L nwucu anus 23
  • 24. Multiple Contexts ROLUOIE T, '°. “. _ Browser toomar - Widgets - Badges - Email ° RSS C , Mobue . . - APIs (rest. soap) '. -.! =!! “.E. '.~-. ’.J. F ((1 L241 Fhnh Salim! 1'; ‘I “col
  • 25. T . m'~jU‘T&IjQD| K odflunxc uluibut finch: Duluufibtulnd Q nut-lqnvnnqanafinn @310 an in on 1;: mg &1j kfilb Itijifibf. IOOTIUZUX indignant I-no-otfirb Zéfijx
  • 26. SITES CONTENT EXPERIENCES - Design considerations - Primary focus on primary content - ondary focus on related and relevant content a. act on: - If expectations are met - People look around the page ~ Relevant calls to action are welcome - when content is distributed or remixed - Core design principles still matter 0 Context is king WEB 2.0 SHIFTS LOCOMOTION *> SERVICES PAGES RICH INTERACTIONS SITES T CONTENT EXPERIENCES WEBMASTERS *' EVERYONE 26
  • 27. - Discussion boards. email newsletters - in 2006.. . - Tags. ratings, reviews. comments. trackbacks. RSS. sharnng (email, IM). distribution. blogs, wikis - Always. .. - People united shared interests erg s Iiiiiiiiii I - Great product: create community - Great actions (useful features & functions) - Great interest (compelling content) - social Behaviors o Reputation& identity - One to One. One to many. many to many communication - Sequences. Rituals, Groups InIIII IICIHI IIII5-I 27
  • 28. Yahoo! Groups Example CYOICOPS 0 II of the user population might start a group (Or a thread wltlnn a group) Synthesizers 0 M oi Lin: L. ‘_. (" pr; -I; -II| .al I: -II mIglI'. par‘. II: Ic-at-; — SCI! ‘-‘&I[, ', and act-Jail‘; .: I'. Ith0r cI3rIt-ant whcather : ~t. Jr: IrIg .1 tiIrI: .1:i -: Ir rt-«.1:-I: -minvvg III] .1 threac-In I: Ir: II1re-_= .s Consumers ° 100% r: -l I"i3 l, I': I}' [‘. ’J. ']‘. ,lIJII. ’fl" tJtf'lt‘. I ' tn: -III "Ire .1~; iwI'. Iu». :: i I "H .3B: w~: ' 5-}": 'IaC. :; IRIIFEI Ilfiltz-I Value from human to human interactions (3 J B’-I-I nveueu anus
  • 29. Contributing tlag reviews favorites calendars tags dISCI. |SSiOi‘| boards lrlme chat III I1 Shaflng Email ‘I0 friend save to list send vi.1lM ad_d to my site download trackbacks add Io biog playllsts subscribe invite Iw-II-Mead Inq- | =!: ’.’: ‘.E. .'. ~.’. J.
  • 30. Filter - Provide Information about information 0 Organic Popularity Original content creation - Flickr Increased Engagement - Yahoo! Answers Invested Customers - eBay Collaborative Innovation - eBay & PayPa| T I d 'soclal" features can - Blur the focus of the product Quality - Splo s. s ratin s. s s. comgien spanii. tragggaolt spam - _’g_. htwe; ' tinteractions = I-9 tweig tconlent Power Laws Power partl ipants Cm become adon-iinant orce Int dl'¢CIl0fl of a proouct - Power can be abused - The vocal minority: potential Innovation hurdle - Factions vs. Tribes Privacy 8 Exposure - Safety Lu-an rweune menu IIIHI I h-II IIIII 30
  • 31. Wclonlno 0 Pay attention to people - Flnckr. Myspace Anonymity can be e deeth sentence - Lack 09 accountabtlity G reputation P073000. Handing 0 Nickname - About] URL 0 Images Aoconlplhhnents v Stufffve 0006 ~ Rewards sociallncentive - ‘You've got mail. -' “""“"‘ any “"“"" In ""“““ me :2 . urv-ensue-c—em» ' new---—-——-I ’_ x. .~: '=-. -:aaa3'. - --- '; :;. -__ fin -XIIE -‘-'-~—-—— :7." I. ..‘- >= "f‘— 1“-= == TIIIIII -"‘W-»- W’ : ;.—-= .—. name 3: —. ——-~--7 2; : ;get u I gfa-_=7:E§mr: . ‘I . - Credlore srnlhoslaeu Consumers - csc personality types do not easily migrate between groups - Scaling engagement is hard and often inappropriate - Leverage dlflerences to rnalnteln balance
  • 32. USER EMPOWERMENT. CONTENT NOT USER FRIENDLY CREATION VALUE CREATION E01 ‘IUD &h DUO U. DUI M1 ‘l&h IQK Dd! M ( beoqvoud<u0ov I/ Nenlrert Vmpnrum. ‘ Become’ Ike lmeonm iv an new use have an fort. -uh not new use leaves me ( QM’. I022 | llX1fl1!; Int-Mun. 150‘ Imaovum. I
  • 33. _‘ - —-I . .. ~ " '1‘ '5 .1 J’ / _ " ' --/ I -3513, "3 If’! —‘‘’, -v-- {-9 “ ‘_‘f ' J . _a J 5‘ 1 I ‘ '74!‘ V } *3; ‘‘~. _‘' _‘ I "Most user-created content is crappy. As we create better tools, we’| l increase the value of the output of those tools. " -will Wright . _.. ._. —.. ... ... _.. - . .., . .u . y_. -.. .. -4. . ... .., . Exiting 84;-"I lIa. cFaraI»_- —. Iv-u—. ..u'—¢¢n. v. -.aIl. .cr«'- . -,. ,. Ivvv4.. .p¢-x. ga'. a‘. ..-~. ,., -.7. . .. » Hun: -r. :.. Iz. .eu, eno-. .vvm. .4.. I -van . ... -.. -.—. ---. —.. I. 1 . q.«u_n. ... .I. .. . I . ... ..—. ... .a. .. . -_. I a. .n, ,_. «u-s-4.» ~o. —-eg. :-an-. nIp. ... -.. .-usages-o. -.nnn. ..-a-15,-: .-s. —:~. ..u-—— I-nae--use-ence--we--1-e-vane-me. -v-ciao. ' ’ "e'aK; ,,. I'-‘. u—'i, -,', ~ ' .11; 7 D E-w ~ «-9: n "-‘vrwv-Ip~—r _’-v-v-v1v. "rIr-v--eV~o¢v-0 '. I-rulv‘ rvIev3Ir~: "~-vv my». ‘.1’- , .. ». -.. .._. ... ... ,,. .,. - . ... ... ... ... ,.. ... ... .._. . -. ... . I». -.—. -am‘. .. -. ... -. ... --—--»——a-4 33
  • 34. corra-rullitv Web lineal encourages fewer. but better posts. ’ -Derek Povrazolt. Design for cornrnunity. 2001 - Barriers to Entry - j'The best check on bad behavior Isa-em ; .r. -: J“ em - Enable identity - Provide for Creators, Synthesizers, Consumers - Tools for expression: easier to do the right thing. remain flexible & robust - Think through barriers to entry
  • 35. Principles behind good design remain relevant Locomotion to services - Packaging Design for Web Applications Page to Rich Interactions - Invitation. Transition. Feedback - Design Patterns Sites to Content Experiences - Landing page design Webmasters to Everyone - Enable identity - Better content creation tools YAHOO! Functlonlng Form www. lul<ew. com, /ff/ Drop me a note Iuke 0" | ukew. com 35

×