Software Tools of Experience Design
Upcoming SlideShare
Loading in...5
×
 

Software Tools of Experience Design

on

  • 686 views

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

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.

Statistics

Views

Total Views
686
Views on SlideShare
638
Embed Views
48

Actions

Likes
0
Downloads
13
Comments
0

1 Embed 48

http://uxbitsandbobs.wordpress.com 48

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Software Tools of Experience Design Software Tools of Experience Design Presentation Transcript

  • 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,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
  • Creative agency withmature UX department30+ experiencedesigners (Boston)Experience designshapes direction formost projects View slide
  • Guide design & developmentFacilitate discussionBuild consensusWI RE F RA MES View slide
  • VS VSVS VS
  • 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
  • PortabilityScalabilityFidelityAgilityModularityPrototyping6 VIRTUESOFWIREFRAMETOOLS
  • • InDesign$$$$Adobe Creative SuitePowerful desktop publishingapplication (Pagemaker)Making inroads as a web andtablet publishing tool
  • InDesignUNLIMITEDCREATIVITYCreate anything youcan imagineTraditional vectordrawing toolsColumns, grids andguidesCommon imageblending and effects+
  • InDesignDETAILEDTYPOGRAPHYLimitless controlSimilar to CSSEasily handlesmassive texts+
  • InDesignPOWERFULSTYLESParagraph andcharacter styles forall text controlsObject styles arepowerful shortcutsfor UI componentsEasy to create+
  • InDesignLIBRARIESCreate once, useacross multiplewireframes orprojectsOrganize by objecttype (buttons, forms,navigation etc.)Share across yourteam+
  • 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 availableInDesign—
  • PortabilityScalabilityFidelityAgilityModularityPrototypingInDesign•
  • • OmniGraffle$$$$The Omni GroupDiagram design toolVersatile graphic design programwith many timesaving features
  • OmniGrafflePOWERFUL UI“STENCILS”GraffletopiaAlmost any UIelement you couldimagineRobust community isalways adding newcontent+
  • OmniGraffleGREATSKETCHING &DIAGRAMMINGEasily creates roughlayoutsPowerful andintuitivediagramming toolsenable fine controlEnough designcontrol to polishconcept, but notcumbersome+
  • OmniGraffleVISIOINTEGRATIONImport andexport files toand from VisioDevelopersand BAs will likeyou more!+
  • OmniGraffleSTRONG PAGEMANAGEMENTLocking layers andcanvases helpmanipulate largedocumentsShared layers allowmaking single editthat applies to allcanvases+
  • OmniGraffleLACK OFINTEGRATIONFEATURESPrototypingfunctionality leavesmuch to be desiredMac onlyNo realcollaborationNo support forannotations ordocumentation—
  • 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 very robustwireframing tool
  • Axure RPGREATPROTOTYPINGCAPABILITIESQuickly develop avery interactiveprototypeNo coding oradvanced techniquesnecessary+
  • Axure RPHIGHLYCOLLABORATIVEEasy to share aproject and worktogether (in AxureRP Pro)Allows for easymanagement ofdocument structurewith large projects+
  • Axure RPPOWERFULDOCUMENTATIONTOOLSAdd notes to the pageor even specificelementsNotes will be includedwhen the specdocument isgenerated+
  • Axure RPREUSABLEELEMENTSEasy to use“masters” forpage layouts; thiswill save timeMasters are editedin isolation,sweeping changesupdateautomatically+
  • Axure RPLACK OFTRADITIONALOUTPUTSpec documentcontains a lot ofinformation, butdoes not lay outannotations in-linewith the wireframeOutput can be morechallenging forclients to follow—
  • 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 remindsviewers that this isonly an ideaGreat for cultivatingalignment (internallyand externally)+
  • Balsamiq MockupsFORCES HIGH-LEVEL THINKINGWorking in stencilsremoves “rendering”from the processand allows thedesigner to focus onfunctionality andbusiness value+
  • Balsamiq MockupsLACK OFFIDELITYOnly two “styles:”Sketch andWireframeUnable to modifymany complex UIelements—
  • Balsamiq MockupsNOT VERYSCALABLEPrimitive documentmanagement (eachscreen is its own file)Rudimentaryprototypingfunctionality—
  • 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 appsfeel “real”Templates fromKeynote Kung Fu(keynotekungfu.com)+
  • 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 be turned intoclickable demoswith apps like Pop(popapp.in)Drawing+
  • 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, oradvanced interaction is often impossibleDrawing—
  • DrawingPortabilityScalabilityFidelityAgilityModularityPrototyping•
  • PortabilityScalabilityFidelityAgilityModularityPrototyping• INDESIGN• OMNIGRAFFLE• AXURE• BALSAMIQ• KEYNOTE• DRAWING6 VIRTUESOFWIREFRAMETOOLS
  • 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
  • THANK YOU
  • DANA GI ULIAN A@XperienceArcWILL MILLAR@ideastateK EN SIGEL@kendoggzQ &A