Your SlideShare is downloading. ×
0
Web Mapping Application   Interface Design:Best Practices and Tools        Michael Gaigg       @michaelgaigg
Design Influencers           User Needs    Context        Culture  Cost                                             Sponso...
Team                                                                     Application                    User Experience   ...
Team                          Information            Application                             Design              Developer...
Process & MethodsStrategy     Concept     Design       Graphics   Develop    UX        UI State                  GUI      ...
Evaluation & Validation Review Expert                          Wireframes   Prototype Review HeuristicEvaluation Usability...
UI State Diagram                                      Concept •   Navigational model from user’s perspective •   Major int...
UI State Diagram - Example
UI State Diagram - Example SELECT LAYERS SCREEN         SHOW FEEDBACK FORM      click “Continue”        click “Report prob...
UI State Diagram - Example
Wireframes                                          Design •   Sketch & communicate ideas and workflows •   Identify missi...
Wireframes - Example
Wireframes DemoBalsamiq
GUI Design                                            Graphics •   Look: Colors, shapes, layout, typefaces •   Feel: Behav...
GUI Design - Example
Prototypes                                          Develop •   Combine visual appearance with interactivity •   Medium or...
Prototypes - Example
Prototype Demohttp://esriurl.com/CommunityMaps
Usability Testing                                         Validation •   “Design Validation” •   Pre-determined scenarios ...
Usability Testing - Example
Usability Testing - Results         Old version
Usability Testing - Results         Old version
Front-End Development                                            Develop •   Overriding styles     -   Increased specifici...
Front-End Development - References •   Boilerplate     -   http://html5boilerplate.com/     -   https://github.com/csnover...
Tools & Resources•   jQuery            http://jquery.com/•   Dojo              https://dojotoolkit.org/•   Twitter Bootstr...
When & How much?Strategy         Concept             Design            Graphics           Develop          4    UX hours  ...
Benefits: Save Money & Useful Product •   Focus on the user (early) saves money     -   Emphasis on important functionalit...
Key Takeaways •   Happy Users = Continued Business = Happy Client •   UX & UI cannot be after-thoughts •   Sketch, Sketch,...
Stay connected •   Michael Gaigg, mgaigg@esri.com •   http://www.michaelgaigg.com/blog/
Please fill out your Session Surveys •   Quick Link from www.esri.com/devsummit •   Offering ID     -   Wednesday: 387    ...
Web Mapping Application Interface Design - Best Practices and Tools
Web Mapping Application Interface Design - Best Practices and Tools
Upcoming SlideShare
Loading in...5
×

Web Mapping Application Interface Design - Best Practices and Tools

3,690

Published on

Slides from the tech session at the Esri DevSummit 2013

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

No Downloads
Views
Total Views
3,690
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
99
Comments
0
Likes
2
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
  • Transcript of "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
    1. A particular slide catching your eye?

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

    ×