Web Mapping Application Interface Design - Best Practices and Tools

6,476 views

Published on

Slides from the tech session at the Esri DevSummit 2013

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,476
On SlideShare
0
From Embeds
0
Number of Embeds
1,326
Actions
Shares
0
Downloads
210
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • EsriCorporate Templatev1.0, Jan 7, 2013See http://arczone/resources/presentations.cfmfor more sample files and help.
  • Based on an article by Ben Melbourne
  • Based on an article by Ben Melbourne
  • When? EarlyWho? Everybody
  • http://ps-ui/prototypes/communitymaps/v3/index.php?p=contribution
  • "works well" rather than "looks good"
  • Includes Google Analytics snippet, icons, jQuery, Modernizr feature detection, Normalize.css resetCSS Preprocessors- Consistency- Easy theme changes- Vendor prefixes through mix-ins- Report errors- Comments removed in compiled code- Import directives: managable code- Variables, Mix-ins, Inheritance- Built-in color functions
  • Web Mapping Application Interface Design - Best Practices and Tools

    1. 1. Web Mapping Application Interface Design:Best Practices and Tools Michael Gaigg @michaelgaigg
    2. 2. Design Influencers User Needs Context Culture Cost Sponsor DesignLifespan Compliance Business Market Technology Needs Opportunities
    3. 3. Team Application User Experience Developer Designer Human Tech Research Design Front-End Back-Endfocused focused User Interface Developer Source: http://asinthecity.com/2011/11/10/the-difference-between-a-ux-designer-and-ui-developer/
    4. 4. Team Information Application Design Developer UX Designer Human Interaction Tech Research Front-End Back-Endfocused Design focused Visual Design UI Developer Graphics Designer
    5. 5. Process & MethodsStrategy Concept Design Graphics Develop UX UI State GUI Wireframes PrototypesStoryboard Diagram Design Usability Custom Surveys Workshops Demos Testing Skins Focus Logos & Front-End Groups Icons
    6. 6. Evaluation & Validation Review Expert Wireframes Prototype Review HeuristicEvaluation Usability Testing
    7. 7. UI State Diagram Concept • Navigational model from user’s 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. 8. UI State Diagram - Example
    9. 9. UI State Diagram - Example SELECT LAYERS SCREEN SHOW FEEDBACK FORM click “Continue” click “Report problem” click “Move marker” show AGOL panel click “Show issues…” select a layer from list click “Cancel”
    10. 10. UI State Diagram - Example
    11. 11. Wireframes Design • 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. 12. Wireframes - Example
    13. 13. Wireframes DemoBalsamiq
    14. 14. GUI Design Graphics • 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. 15. GUI Design - Example
    16. 16. Prototypes Develop • 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. 17. Prototypes - Example
    18. 18. Prototype Demohttp://esriurl.com/CommunityMaps
    19. 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. 20. Usability Testing - Example
    21. 21. Usability Testing - Results Old version
    22. 22. Usability Testing - Results Old version
    23. 23. Front-End Development Develop • 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. 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. 25. Tools & Resources• jQuery http://jquery.com/• Dojo https://dojotoolkit.org/• Twitter Bootstrap http://getbootstrap.com• Dojo Bootstrap http://dojobootstrap.com/• dgrid: http://dojofoundation.org/packages/dgrid/• Telerik KendoUI http://demos.kendoui.com/• Stylus http://learnboost.github.com/stylus/• Balsamiq http://www.balsamiq.com/• MockupsToGo https://mockupstogo.mybalsamiq.com/projects• Techsmith Morae http://www.techsmith.com/morae.html
    26. 26. When & How much?Strategy Concept Design Graphics Develop 4 UX hours UI State 8 8+ 16 GUI hours 16+ hours Wireframes hours Prototypes hoursStoryboard Diagram Design 4 16+ 32+ 32 16+ hours hours Usabilityhours Custom hours Surveys Workshops Demos hours Testing Skins 16+ 8 40+ Focus hours Logos & hours hours Front-End Groups IconsProposals Requirements Design Implementation
    27. 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. 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. 29. Stay connected • Michael Gaigg, mgaigg@esri.com • http://www.michaelgaigg.com/blog/
    30. 30. Please fill out your Session Surveys • Quick Link from www.esri.com/devsummit • Offering ID - Wednesday: 387 - Thursday: 395Michael Gaigg

    ×