Web Mapping Application Interface Design: Best Practices and Tools. Michael

Transcription

1 Web Mapping Application Interface Design: Best Practices and Tools Michael

2 Team User Experience Designer Application Developer Human focused Research Design Front-End Back-End Tech focused User Interface Developer

3 Team UX Designer Information Design Application Developer Human focused Research Interaction Design Front-End Back-End Tech focused Graphics Designer Visual Design UI Developer

4 Design Influencers User Needs Context Culture Cost Lifespan Design Sponsor Compliance Business Needs Technology Market Opportunities

5 Process & Methods Strategy Concept Design Graphics Develop UX Storyboard UI State Diagram Wireframes GUI Design Prototypes Surveys Workshops Usability Testing Custom Skins Demos Focus Groups Logos & Icons Front-End

6 Evaluation & Validation Review Expert Review Wireframes Prototype Heuristic Evaluation Usability Testing

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 UI State Diagram - Example

9 UI State Diagram - Example SELECT LAYERS SCREEN click Continue click Move marker SHOW FEEDBACK FORM click Report problem show AGOL panel click Show issues select a layer from list click Cancel

10 UI State Diagram - Example

11 Wireframes Design Sketch & communicate ideas and workflows Identify missing requirements (gaps & holes) Validate design assumptions Focus on scope and functionality Ask WHY & WHAT! Paper, Balsamiq & mybalsamiq

12 Wireframes - Example

13 Wireframes Demo Balsamiq

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 GUI Design - Example

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 Prototypes - Example

18 Prototype Demo ps/v3/index.php?p=contribu tion

19 Usability Testing Validation Design Validation Usability lab setting: Participant, facilitator, observers Pre-determined scenarios of most common tasks Find design inconsistencies & usability problems Identify navigation & presentation errors Morae, Adobe Connect

20 Usability Testing - Example

21 Usability Testing - Results Old version

22 Usability Testing - Results Old version

23 Front-End Development Develop Boilerplate Code - HTML5: Esri is on GitHub - Overview: - JS map: Dojo - Dojo toolkit: - dgrid: - Bootstrap: Use CSS Preprocessor - Stylus:

24 Tools & Resources jquery jquery UI jquery Mobile Dojo Telerik KendoUI Twitter Bootstrap Techsmith Morae

25 When & How much? Strategy Concept Design Graphics Develop UX 4 Storyboard hours UI State Diagram 8 hours 8+ Wireframes hours GUI Design 16 hours 16+ Prototypes hours Surveys 4 hours 16+ hours Workshops 32+ Usability hours Testing Custom Skins 32 hours 16+ hours Demos Focus Groups 16+ hours Logos & Icons 8 hours Front-End 40+ hours Proposals Requirements Design Implementation

26 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

27 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!

28 Stay connected Michael Gaigg,

29 Please fill out your Session Surveys Offering ID - Wednesday: # Thursday: # 395 # #

30

31