1.Web Mapping Application Interface Design:Best Practices and ToolsMichael Gaigg @michaelgaigg

2. Design Influencers User NeedsContextCultureCost SponsorDesignLifespanCompliance BusinessMarketTechnologyNeedsOpportunities 3. Team ApplicationUser ExperienceDeveloperDesigner Human TechResearchDesign Front-End Back-Endfocusedfocused User Interface DeveloperSource: http://asinthecity.com/2011/11/10/the-difference-between-a-ux-designer-and-ui-developer/ 4. TeamInformationApplication DesignDeveloperUX Designer HumanInteraction TechResearch Front-End Back-Endfocused DesignfocusedVisualDesignUI Developer Graphics Designer 5. Process & MethodsStrategy Concept Design Graphics DevelopUXUI StateGUI WireframesPrototypesStoryboardDiagramDesignUsabilityCustom Surveys WorkshopsDemosTesting Skins Focus Logos & Front-End Groups Icons 6. Evaluation & Validation Review ExpertWireframes Prototype Review HeuristicEvaluation Usability Testing 7. UI State DiagramConcept Navigational model from users perspective Major interface elements and how they relate Map user stories to desired workflow Can be informal (white board or paper drawing) Whiteboard, MS Powerpoint, MS Visio 8. UI State Diagram - Example 9. UI State Diagram - Example SELECT LAYERS SCREEN SHOW FEEDBACK FORMclick Continueclick Report problem click Move markershow AGOL panel click Show issues select a layer from list click Cancel 10. UI State Diagram - Example 11. WireframesDesign Sketch & communicate ideas and workflows Identify missing requirements (gaps & holes) Validate design assumptions Focus on scope and functionality Ask WHAT & WHY! Paper, Balsamiq & myBalsamiq 12. Wireframes - Example 13. Wireframes DemoBalsamiq 14. GUI DesignGraphics Look: Colors, shapes, layout, typefaces Feel: Behavior/states of buttons, boxes, menus From static image to interactive controls HTML & CSS, ActionScript, XAML Photoshop & Illustrator 15. GUI Design - Example 16. PrototypesDevelop Combine visual appearance with interactivity Medium or high visual fidelity Navigation, content, mock functionality Deliver: HTML, CSS, JavaScript, Images jQuery, Twitter Bootstrap, Telerik KendoUI 17. Prototypes - Example 18. Prototype Demohttp://esriurl.com/CommunityMaps 19. Usability Testing Validation Design Validation Pre-determined scenarios of most common tasks Find design inconsistencies & usability problems Identify navigation & presentation errors Usability lab setting: Participant, facilitator, observers Morae, Adobe Connect 20. Usability Testing - Example 21. Usability Testing - Results Old version 22. Usability Testing - Results Old version 23. Front-End DevelopmentDevelop Overriding styles - Increased specificity - Global or local scope Dojo Bootstrap - Version 1.1 is based on dojo 1.8: http://dojobootstrap.com/ - ArcGIS API for JavaScript 3.3 w/ Bootstrap 1.1 https://github.com/Esri/dojo-bootstrap-ui-for-maps-js New Theme using CSS Preprocessor - Variables, mix-ins; Error reporting, consistency, inheritance https://github.com/kfranqueiro/dijit-claro-stylus 24. Front-End Development - References Boilerplate - http://html5boilerplate.com/ - https://github.com/csnover/dojo-boilerplate Esri Quickstart Templates - https://github.com/Esri/quickstart-map-js - https://github.com/DavidSpriggs/ConfigurableViewerJSAPI - http://esri.github.com/ 25. Tools & Resources jQueryhttp://jquery.com/ Dojohttps://dojotoolkit.org/ Twitter Bootstrap http://getbootstrap.com Dojo Bootstraphttp://dojobootstrap.com/ dgrid:http://dojofoundation.org/packages/dgrid/ Telerik KendoUI http://demos.kendoui.com/ Stylushttp://learnboost.github.com/stylus/ Balsamiqhttp://www.balsamiq.com/ MockupsToGo https://mockupstogo.mybalsamiq.com/projects Techsmith Morae http://www.techsmith.com/morae.html 26. When & How much?Strategy Concept DesignGraphics Develop4UX hoursUI State8 8+ 16 GUI hours 16+ hours Wireframeshours Prototypes hoursStoryboardDiagram Design 4 16+32+ 32 16+hourshoursUsabilityhoursCustomhours Surveys Workshops Demos hoursTestingSkins16+8 40+ Focus hoursLogos & hourshoursFront-End GroupsIconsProposals Requirements DesignImplementation 27. Benefits: Save Money & Useful Product Focus on the user (early) saves money - Emphasis on important functionality - Identify unforeseen or missing requirements - Avoid unnecessary rework Improved client relationship - Both sides actively involved in the process - Opportunity for change order in a natural setting - Useful and usable product 28. Key Takeaways Happy Users = Continued Business = Happy Client UX & UI cannot be after-thoughts Sketch, Sketch, Sketch Expert Review + Wireframes is a popular package Make the user a stakeholder! 29. Stay connected Michael Gaigg, mgaigg@esri.com http://www.michaelgaigg.com/blog/ 30. Please fill out your Session Surveys Quick Link from www.esri.com/devsummit Offering ID - Wednesday: 387 - Thursday: 395Michael Gaigg