TOOLSof theTRADEAnalyzing the functionality and role ofwireframing tools in user experience design
DAN A GIULIA NA@XperienceArcExperience Architect,photographer, bikerRecent work withChrysler,Dunkin Donuts, Fidelity,Bosto...
Creative agency withmature UX department30+ experiencedesigners (Boston)Experience designshapes direction formost projects
Guide design & developmentFacilitate discussionBuild consensusWI RE F RA MES
VS VSVS VS
PortabilityScalabilityFidelityAgilityModularityPrototyping6 VIRTUES OF WIREFRAME TOOLS• Speed• Ease of iteration• Pixel pe...
PortabilityScalabilityFidelityAgilityModularityPrototyping6 VIRTUESOFWIREFRAMETOOLS
• InDesign$$$$Adobe Creative SuitePowerful desktop publishingapplication (Pagemaker)Making inroads as a web andtablet publ...
InDesignUNLIMITEDCREATIVITYCreate anything youcan imagineTraditional vectordrawing toolsColumns, grids andguidesCommon ima...
InDesignDETAILEDTYPOGRAPHYLimitless controlSimilar to CSSEasily handlesmassive texts+
InDesignPOWERFULSTYLESParagraph andcharacter styles forall text controlsObject styles arepowerful shortcutsfor UI componen...
InDesignLIBRARIESCreate once, useacross multiplewireframes orprojectsOrganize by objecttype (buttons, forms,navigation etc...
EMBEDDOCUMENTSINTO ONEANOTHERCollaborate withother team membersUpdate instanceswith one clickInDesign+
ROBUST TABLESData is structured &alignedDetailed formattingImport from Excel(link to live .XLS file)InDesign+
LIMITEDINTERACTIVITYLimited hover andclick eventsObjects can animateand have statesPresent inclickable .PDFor .SWFInDesign—
STARTINGFROM SCRATCHNo pre-builtcomponents,libraries or stylesDeveloping yourown take some timeInDesign—
STEEPLEARNINGCURVENewbies needseveral days tobecome veryproductiveSo many features(I’m still learning!)Classes availableIn...
PortabilityScalabilityFidelityAgilityModularityPrototypingInDesign•
• OmniGraffle$$$$The Omni GroupDiagram design toolVersatile graphic design programwith many timesaving features
OmniGrafflePOWERFUL UI“STENCILS”GraffletopiaAlmost any UIelement you couldimagineRobust community isalways adding newconte...
OmniGraffleGREATSKETCHING &DIAGRAMMINGEasily creates roughlayoutsPowerful andintuitivediagramming toolsenable fine control...
OmniGraffleVISIOINTEGRATIONImport andexport files toand from VisioDevelopersand BAs will likeyou more!+
OmniGraffleSTRONG PAGEMANAGEMENTLocking layers andcanvases helpmanipulate largedocumentsShared layers allowmaking single e...
OmniGraffleLACK OFINTEGRATIONFEATURESPrototypingfunctionality leavesmuch to be desiredMac onlyNo realcollaborationNo suppo...
OmniGraffleLACK OFFIDELITYAbility to execute fine typography or pixel-perfectdesign is not near the level of InDesign—
OmniGrafflePortabilityScalabilityFidelityAgilityModularityPrototyping•
• Axure RP$$$$Growing in popularity with bothUX communities and client teamsBasic prototyping software,maturing into a ver...
Axure RPGREATPROTOTYPINGCAPABILITIESQuickly develop avery interactiveprototypeNo coding oradvanced techniquesnecessary+
Axure RPHIGHLYCOLLABORATIVEEasy to share aproject and worktogether (in AxureRP Pro)Allows for easymanagement ofdocument st...
Axure RPPOWERFULDOCUMENTATIONTOOLSAdd notes to the pageor even specificelementsNotes will be includedwhen the specdocument...
Axure RPREUSABLEELEMENTSEasy to use“masters” forpage layouts; thiswill save timeMasters are editedin isolation,sweeping ch...
Axure RPLACK OFTRADITIONALOUTPUTSpec documentcontains a lot ofinformation, butdoes not lay outannotations in-linewith the ...
Axure RPROUGH DESIGNTOOLSSome basic controls are surprisinglyunavailable—
Axure RPCHALLENGINGCOMPLEXITYNot immediately intuitiveFormidable learning curveRarely the best tool to start a project in—
Axure RPPortabilityScalabilityFidelityAgilityModularityPrototyping•
• Balsamiq Mockups$$$$Efficient “sketch” tool for lo-fiprototypingPopular among non-designers(clients, devs, etc.)
Balsamiq MockupsFAST ANDADAPTABLEBuild prototypeswith pre-made UIelementsNaturally leverageinterface conventions+
Balsamiq MockupsINTUITIVEINTERFACEMinimal learningcurve (learn in amatter of minutes)Simple and funto use+
Balsamiq MockupsPROPERLYCONTROLS THEDISCUSSIONIsolate the scope ofthe conversation to“concept-only”Sketch style remindsvie...
Balsamiq MockupsFORCES HIGH-LEVEL THINKINGWorking in stencilsremoves “rendering”from the processand allows thedesigner to ...
Balsamiq MockupsLACK OFFIDELITYOnly two “styles:”Sketch andWireframeUnable to modifymany complex UIelements—
Balsamiq MockupsNOT VERYSCALABLEPrimitive documentmanagement (eachscreen is its own file)Rudimentaryprototypingfunctionali...
Balsamiq MockupsPortabilityScalabilityFidelityAgilityModularityPrototyping•
• Keynote$$$$Presentation design software(“Apple’s PowerPoint”)Recently repurposed as aversatile prototyping tool
KeynoteROBUSTANIMATION/TRANSITIONSWide array ofoptions for bringingyour comps to lifeCombining multipleeffects makes appsf...
Keynote“MAGICALLY”EFFICIENTINTERFACE“Magic Move” isunbelievably easyto useMany other intuitivemotion controls+
KeynoteNOT BUILT FORWIREFRAMINGCloser toPowerPointthan AxureDetailed wiresare possible, butoften requireworkarounds—
KeynoteCRUMBLESUNDER HEAVYWEIGHT50+ pagedocuments canoften becomeunstableInexplicable errorsare not uncommon—
KeynotePortabilityScalabilityFidelityAgilityModularityPrototyping•
• Drawing$$$$Since 30,000 B.C.(largest user base)Learned in kindergartenWhite board, pen & paper,digital sketching
DEMOCRATIZINGAnyone canarticulate an ideaInvolve full team(developers, PMs,writers)Get stakeholdersinvolved upfrontDrawing+
NOCONSTRAINTSFreedom totry anythingGreater visibility intothe process (howwireframes play arole)Drawing+
ADVANCEDTECHNIQUESAlternate states withPost-itsPhotocopytemplates pages tospeed up iterationDrawing+
DIGITALTRANSLATIONEasily digitizesketches withscanners or mobileapps like TurboScan(turboscanapp.com)Digitized drawingscan...
DIGITALSKETCHINGSketching on atablet is quick andnaturalEveryone lovesPaper for iPad(fiftythree.com)Drawing+
DOES NOTSCALEAt a certain point, pen and paper becomes untenableTrying to articulate too many screens, animations, oradvan...
DrawingPortabilityScalabilityFidelityAgilityModularityPrototyping•
PortabilityScalabilityFidelityAgilityModularityPrototyping• INDESIGN• OMNIGRAFFLE• AXURE• BALSAMIQ• KEYNOTE• DRAWING6 VIRT...
Don’t limit yourselfTools define how we workand thinkGet comfortable with multiple toolsChoose tools that fit your project...
THANK YOU
DANA GI ULIAN A@XperienceArcWILL MILLAR@ideastateK EN SIGEL@kendoggzQ &A
Software Tools of Experience Design
Software Tools of Experience Design
Software Tools of Experience Design
Software Tools of Experience Design
Upcoming SlideShare
Loading in...5
×

Software Tools of Experience Design

518

Published on

A presentation at UXPA Boston by Dana Giuliana, Will Millar and Ken Sigel in May 2013. It discusses the popular tools we use to create wireframes - their strengths and weaknesses and encourages designers to get beyond using a single tool since there is no tool that does everything we need.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
518
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Software Tools of Experience Design"

  1. 1. TOOLSof theTRADEAnalyzing the functionality and role ofwireframing tools in user experience design
  2. 2. DAN A GIULIA NA@XperienceArcExperience Architect,photographer, bikerRecent work withChrysler,Dunkin Donuts, Fidelity,Boston.comStudiedFilm atEmerson CollegeWILL MILLAR@ideastateThinker, maker,question-askerRecent work withFidelity Biosciences,MassArt,City of BostonStudiedGraphic Design atMassArtKEN SIGE L@kendoggzRunner, chef, problem solverRecent work withStaples,The Hartford,HumanaStudiedCreative Writing atWheaton College
  3. 3. Creative agency withmature UX department30+ experiencedesigners (Boston)Experience designshapes direction formost projects
  4. 4. Guide design & developmentFacilitate discussionBuild consensusWI RE F RA MES
  5. 5. VS VSVS VS
  6. 6. PortabilityScalabilityFidelityAgilityModularityPrototyping6 VIRTUES OF WIREFRAME TOOLS• Speed• Ease of iteration• Pixel perfectionof UI detail• Collaboration• Printing/PDFExporting• Reusablecomponents• Templates/styles• Exportinginteractive demos• Transitions/animation• Handling largedocumentstructures• Complexity ofpage elements
  7. 7. PortabilityScalabilityFidelityAgilityModularityPrototyping6 VIRTUESOFWIREFRAMETOOLS
  8. 8. • InDesign$$$$Adobe Creative SuitePowerful desktop publishingapplication (Pagemaker)Making inroads as a web andtablet publishing tool
  9. 9. InDesignUNLIMITEDCREATIVITYCreate anything youcan imagineTraditional vectordrawing toolsColumns, grids andguidesCommon imageblending and effects+
  10. 10. InDesignDETAILEDTYPOGRAPHYLimitless controlSimilar to CSSEasily handlesmassive texts+
  11. 11. InDesignPOWERFULSTYLESParagraph andcharacter styles forall text controlsObject styles arepowerful shortcutsfor UI componentsEasy to create+
  12. 12. InDesignLIBRARIESCreate once, useacross multiplewireframes orprojectsOrganize by objecttype (buttons, forms,navigation etc.)Share across yourteam+
  13. 13. EMBEDDOCUMENTSINTO ONEANOTHERCollaborate withother team membersUpdate instanceswith one clickInDesign+
  14. 14. ROBUST TABLESData is structured &alignedDetailed formattingImport from Excel(link to live .XLS file)InDesign+
  15. 15. LIMITEDINTERACTIVITYLimited hover andclick eventsObjects can animateand have statesPresent inclickable .PDFor .SWFInDesign—
  16. 16. STARTINGFROM SCRATCHNo pre-builtcomponents,libraries or stylesDeveloping yourown take some timeInDesign—
  17. 17. STEEPLEARNINGCURVENewbies needseveral days tobecome veryproductiveSo many features(I’m still learning!)Classes availableInDesign—
  18. 18. PortabilityScalabilityFidelityAgilityModularityPrototypingInDesign•
  19. 19. • OmniGraffle$$$$The Omni GroupDiagram design toolVersatile graphic design programwith many timesaving features
  20. 20. OmniGrafflePOWERFUL UI“STENCILS”GraffletopiaAlmost any UIelement you couldimagineRobust community isalways adding newcontent+
  21. 21. OmniGraffleGREATSKETCHING &DIAGRAMMINGEasily creates roughlayoutsPowerful andintuitivediagramming toolsenable fine controlEnough designcontrol to polishconcept, but notcumbersome+
  22. 22. OmniGraffleVISIOINTEGRATIONImport andexport files toand from VisioDevelopersand BAs will likeyou more!+
  23. 23. OmniGraffleSTRONG PAGEMANAGEMENTLocking layers andcanvases helpmanipulate largedocumentsShared layers allowmaking single editthat applies to allcanvases+
  24. 24. OmniGraffleLACK OFINTEGRATIONFEATURESPrototypingfunctionality leavesmuch to be desiredMac onlyNo realcollaborationNo support forannotations ordocumentation—
  25. 25. OmniGraffleLACK OFFIDELITYAbility to execute fine typography or pixel-perfectdesign is not near the level of InDesign—
  26. 26. OmniGrafflePortabilityScalabilityFidelityAgilityModularityPrototyping•
  27. 27. • Axure RP$$$$Growing in popularity with bothUX communities and client teamsBasic prototyping software,maturing into a very robustwireframing tool
  28. 28. Axure RPGREATPROTOTYPINGCAPABILITIESQuickly develop avery interactiveprototypeNo coding oradvanced techniquesnecessary+
  29. 29. Axure RPHIGHLYCOLLABORATIVEEasy to share aproject and worktogether (in AxureRP Pro)Allows for easymanagement ofdocument structurewith large projects+
  30. 30. Axure RPPOWERFULDOCUMENTATIONTOOLSAdd notes to the pageor even specificelementsNotes will be includedwhen the specdocument isgenerated+
  31. 31. Axure RPREUSABLEELEMENTSEasy to use“masters” forpage layouts; thiswill save timeMasters are editedin isolation,sweeping changesupdateautomatically+
  32. 32. Axure RPLACK OFTRADITIONALOUTPUTSpec documentcontains a lot ofinformation, butdoes not lay outannotations in-linewith the wireframeOutput can be morechallenging forclients to follow—
  33. 33. Axure RPROUGH DESIGNTOOLSSome basic controls are surprisinglyunavailable—
  34. 34. Axure RPCHALLENGINGCOMPLEXITYNot immediately intuitiveFormidable learning curveRarely the best tool to start a project in—
  35. 35. Axure RPPortabilityScalabilityFidelityAgilityModularityPrototyping•
  36. 36. • Balsamiq Mockups$$$$Efficient “sketch” tool for lo-fiprototypingPopular among non-designers(clients, devs, etc.)
  37. 37. Balsamiq MockupsFAST ANDADAPTABLEBuild prototypeswith pre-made UIelementsNaturally leverageinterface conventions+
  38. 38. Balsamiq MockupsINTUITIVEINTERFACEMinimal learningcurve (learn in amatter of minutes)Simple and funto use+
  39. 39. Balsamiq MockupsPROPERLYCONTROLS THEDISCUSSIONIsolate the scope ofthe conversation to“concept-only”Sketch style remindsviewers that this isonly an ideaGreat for cultivatingalignment (internallyand externally)+
  40. 40. Balsamiq MockupsFORCES HIGH-LEVEL THINKINGWorking in stencilsremoves “rendering”from the processand allows thedesigner to focus onfunctionality andbusiness value+
  41. 41. Balsamiq MockupsLACK OFFIDELITYOnly two “styles:”Sketch andWireframeUnable to modifymany complex UIelements—
  42. 42. Balsamiq MockupsNOT VERYSCALABLEPrimitive documentmanagement (eachscreen is its own file)Rudimentaryprototypingfunctionality—
  43. 43. Balsamiq MockupsPortabilityScalabilityFidelityAgilityModularityPrototyping•
  44. 44. • Keynote$$$$Presentation design software(“Apple’s PowerPoint”)Recently repurposed as aversatile prototyping tool
  45. 45. KeynoteROBUSTANIMATION/TRANSITIONSWide array ofoptions for bringingyour comps to lifeCombining multipleeffects makes appsfeel “real”Templates fromKeynote Kung Fu(keynotekungfu.com)+
  46. 46. Keynote“MAGICALLY”EFFICIENTINTERFACE“Magic Move” isunbelievably easyto useMany other intuitivemotion controls+
  47. 47. KeynoteNOT BUILT FORWIREFRAMINGCloser toPowerPointthan AxureDetailed wiresare possible, butoften requireworkarounds—
  48. 48. KeynoteCRUMBLESUNDER HEAVYWEIGHT50+ pagedocuments canoften becomeunstableInexplicable errorsare not uncommon—
  49. 49. KeynotePortabilityScalabilityFidelityAgilityModularityPrototyping•
  50. 50. • Drawing$$$$Since 30,000 B.C.(largest user base)Learned in kindergartenWhite board, pen & paper,digital sketching
  51. 51. DEMOCRATIZINGAnyone canarticulate an ideaInvolve full team(developers, PMs,writers)Get stakeholdersinvolved upfrontDrawing+
  52. 52. NOCONSTRAINTSFreedom totry anythingGreater visibility intothe process (howwireframes play arole)Drawing+
  53. 53. ADVANCEDTECHNIQUESAlternate states withPost-itsPhotocopytemplates pages tospeed up iterationDrawing+
  54. 54. DIGITALTRANSLATIONEasily digitizesketches withscanners or mobileapps like TurboScan(turboscanapp.com)Digitized drawingscan be turned intoclickable demoswith apps like Pop(popapp.in)Drawing+
  55. 55. DIGITALSKETCHINGSketching on atablet is quick andnaturalEveryone lovesPaper for iPad(fiftythree.com)Drawing+
  56. 56. DOES NOTSCALEAt a certain point, pen and paper becomes untenableTrying to articulate too many screens, animations, oradvanced interaction is often impossibleDrawing—
  57. 57. DrawingPortabilityScalabilityFidelityAgilityModularityPrototyping•
  58. 58. PortabilityScalabilityFidelityAgilityModularityPrototyping• INDESIGN• OMNIGRAFFLE• AXURE• BALSAMIQ• KEYNOTE• DRAWING6 VIRTUESOFWIREFRAMETOOLS
  59. 59. Don’t limit yourselfTools define how we workand thinkGet comfortable with multiple toolsChoose tools that fit your project,strengths, and teamStay curious and have fun
  60. 60. THANK YOU
  61. 61. DANA GI ULIAN A@XperienceArcWILL MILLAR@ideastateK EN SIGEL@kendoggzQ &A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×