Michael Gaigg & Allan Laframboise
Improving your Web App through UI/UX Best Practices – Part I
Problem Ship
Definition
“The purpose of software development is to ship products that solve a problem”
Defin
ition
Problem Ship
“Finding the best solution requires to discover possible ideas”
• Conceptual Design (Wireframes)• Visual Design (Mockups)• Prototyping• Front-End Dev (Code)• Usability Testing (Reports)
UI
Defin
ition
Problem Ship
“Framing the right problem to solve is the actual design challenge.”
• Conceptual Design (Wireframes)• Visual Design (Mockups)• Prototyping• Front-End Dev (Code)• Usability Testing (Reports)
UIUX
• Empathy• Interviews (Personas)• Surveys• Journey Mapping (Scenarios)• Workshops (Strategy)
Finding the Problem Finding the Solution
WHY / HOW WHAT
DISCOVERinsights into the problem
DEFINEthe area to focus upon
Research Strategy
DEVELOPpotential solutions
DELIVERsolutions that work
Design Implementation
Problem Ship
Defin
ition
UX UI
• Empathy• Interviews (Personas)• Surveys• Journey Mapping (Scenarios)• Workshops (Strategy)
• Conceptual Design (Wireframes)• Visual Design (Mockups)• Prototyping• Front-End Dev (Code)• Usability Testing (Reports)
UX Strategy (aka What is good Design?)
• Who is using it?
• What do they want to do?
• Are the users able to accomplish their tasks?
• Are the users happy?
• Do we meet business needs?
• Was it successful?
=> Purpose
End Users
End User Needs
Usability
User Experience
Business Needs
Success Criteria
UI Design
• Sketch, sketch, sketch
• Study design basics for apps
• Apply best practices for map apps
Wireframes
Design Lab http://esriurl.com/DesignLab
Map UI Patterns http://mapuipatterns.com
http://balsamiq.com
http://mapuipatterns.comMap UI Patterns
What is good Design?
Old Version Version 1
Unified SearchLocate Me
Home Button
Placemarks Thematic Map
Feature SelectionBrowse Geographies
Task Oriented
Version 1 Version 2
Legend
Dashboard
Layer List
Common Problems solved by Map UI Patterns
• Too much data- Thematic Map http://mapuipatterns.com/thematic-map- Attribute Filter http://mapuipatterns.com/attribute-filter- Spatial Filter http://mapuipatterns.com/spatial-filter
• Interactions between App and Map- Marker List http://mapuipatterns.com/marker-list- List & Details http://mapuipatterns.com/list-details- Extent-driven Content http://mapuipatterns.com/extent-driven-content- Store Locator http://mapuipatterns.com/store-locator
• Layouts http://mapuipatterns.com/category/layouts/
Map is the focus & the core valueFull Map
Map and content equally important & workflow drivenPartial Map
For navigation & reference purposesReference Map
No MapTask doesn’t require a map but utilizes power of GIS
Toggle between Full Map and Reference MapFocus on the Subject
Mobile
No partial map on mobile!
Toggle betweenreference map
& full map
User Study & 3DArcGIS Indoors
User Study
• Objectives:- Is the map always the best approach?- Is familiarity with the environment or technology an influential factor?
• Method:- Remote, asynchronous study with instrumented app- Upfront questions about user- Short & pre-defined tasks- A/B testing (initial extent & basemap)
Task: Save your office as the home location
Data Collection
• Elasticsearch storage
• Kibana dashboard visualizations
User Flow & Analysis
• High map usage (for all groups of users)- 13% made use of the search bar- 7% made use of the “explore” sidebar
A/B Testing: Extents
Familiar Less familiar High GIS rating Low GIS rating
Campus
Building Q Pan Zoom Out Zoom Out a bit + Pan Zoom Out
Zoom In Zoom In + Pan Zoom In + Pan Zoom In + Pan
Familiar with Campus Less Familiar with Campus
Task: Retrieve step-by-step instructions from the café to Mike Gaigg’s office
• 47% opened the “Directions” sidebar
• 36% used the search bar in the header
• 17% selected a location (café or office) from the mapAll of them rated their GIS or campus familiarity with a score higher than 4
• Typing in source & destination in the
directions widget is the most convenient way
Task-focused Workflow
More Insights: 3D
• Users did not make use of 3D- Either were happy with 2D for the required tasks or- Did not see the option (poor design)
• So why do we need 3D?- Practice Lead: “It’s a must”- 3D Team: “You still do 2D? You are so yesterday!”- Clients: “We want to see our PDF maps online”
• Challenge:- Understand the problem to the solution
Better Design: 2D/3D Toggle
• Get inspiration
• Games have solved this for ages
• Mini-Map marries best of both worlds
Key Takeaways
• UX & UI cannot be after-thoughts
• Sketch, Sketch, Sketch
• Ask: - Who is using it? - What do they want to do?- Was it successful?
• Use Map UI Patterns