• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Mapping Application Interface Design - Best Practices and Tools

Web Mapping Application Interface Design - Best Practices and Tools



Slides from the tech session at the Esri DevSummit 2013

Slides from the tech session at the Esri DevSummit 2013



Total Views
Views on SlideShare
Embed Views



2 Embeds 711

http://www.michaelgaigg.com 710
http://webcache.googleusercontent.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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 Web Mapping Application Interface Design - Best Practices and Tools Presentation Transcript

  • Web Mapping Application Interface Design:Best Practices and Tools Michael Gaigg @michaelgaigg
  • Design Influencers User Needs Context Culture Cost Sponsor DesignLifespan Compliance Business Market Technology Needs Opportunities
  • 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/
  • Team Information Application Design Developer UX Designer Human Interaction Tech Research Front-End Back-Endfocused Design focused Visual Design UI Developer Graphics Designer
  • 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
  • Evaluation & Validation Review Expert Wireframes Prototype Review HeuristicEvaluation Usability Testing
  • 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
  • UI State Diagram - Example
  • 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”
  • UI State Diagram - Example
  • 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
  • Wireframes - Example
  • Wireframes DemoBalsamiq
  • 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
  • GUI Design - Example
  • 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
  • Prototypes - Example
  • Prototype Demohttp://esriurl.com/CommunityMaps
  • 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
  • Usability Testing - Example
  • Usability Testing - Results Old version
  • Usability Testing - Results Old version
  • 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
  • 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/
  • 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
  • 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
  • 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
  • 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!
  • 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 - Thursday: 395Michael Gaigg