"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 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
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 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”
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, firstname.lastname@example.org • 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