User Experience and Interface Design for Web Apps - II
@MichaelGiagg @AL_Laframboise
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564390/UC_Section.jpg)
Today's Problem
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564390/UC_Section.jpg)
This is a working app.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035603/gisday-visualdesign-page.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1053236/gis-day-app2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Good design?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035603/gisday-visualdesign-page.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Need more information!
- Who was it designed for?
- What was it supposed to do?
- Were users able to accomplish their task?
- Were the users happy?
- What was the success criteria?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Design Process
- Strategy
- Concept
- Design
- Graphical Design
- Implementation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564390/UC_Section.jpg)
Strategy?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035603/gisday-visualdesign-page.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Original Strategy
We need a map.
We need a map.
We need to solve a problem!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035603/gisday-visualdesign-page.png)
Useful?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Let's Redesign!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564390/UC_Section.jpg)
Strategy Revised - I
-
Why are we doing this?
- Who is our audience?
- What are the needs of the end-user?
-
Help people find GIS Day events near them (online)
-
Potential participants interested in GIS Day events...
- Find an event, learn about event, attend event
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Strategy Revised - II
- What is the business need?
- What is the success criteria?
- People learn about GIS and discover Esri
- More people find and participate in events and more people use Esri software
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Identify Problems
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564390/UC_Section.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035603/gisday-visualdesign-page.png)
Call to "Maction"?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035603/gisday-visualdesign-page.png)
Context?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035603/gisday-visualdesign-page.png)
Use of space?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035603/gisday-visualdesign-page.png)
Cartography?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035603/gisday-visualdesign-page.png)
Map Controls?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Data?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035781/gis-day-original-popup.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Information?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035781/gis-day-original-popup.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035603/gisday-visualdesign-page.png)
Search for events?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Conceptual Design
User Story, Workflows, State diagrams
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564390/UC_Section.jpg)
User Stories/Use Cases
- Primary - Search for place or event name
- Take them to an event
- Display information
- Secondary - Search via map controls
- Zoom
- Geolocation
- Map
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Conceptual Workflow
- User opens GISDay.com webpage
- User types in search for a place or event name
- User selects search result (go to 4.)
- User moves cursor over map
- User clicks on map (go to 4.)
- Map zooms to location and shows popup info
- User clicks event links to learn more
- New webpage opens
- Email window opens
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Wireframes
Disposable, Simplified Sketch
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564390/UC_Section.jpg)
Blank Slate!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035843/gisday-mockup-full.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Context
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035843/gisday-mockup-full.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Larger Map
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035843/gisday-mockup-full.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Unified Search - place + event
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035983/gisday-mockup-search.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Overlapping Points
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035983/gisday-mockup-search.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Event Information
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035889/gisday-mockup-full-popup.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Satisfied with Design?
Test against use cases and workflow.
Did it allow user to accomplish task?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Graphical Design
Colors, Schemes, Fonts...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564390/UC_Section.jpg)
Visual Hierarchy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035603/gisday-visualdesign-page.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Symbol Colors
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035559/gisday-colorramp.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035589/gisday-visualdesign-map.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Search UI
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1036001/gisday-mockup-search-only.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Popup
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035854/gisday-visual-design-popup.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Interaction Design
Map UI Behaviors
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564390/UC_Section.jpg)
Search Interaction
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1036001/gisday-mockup-search-only.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Select an Event
- Zoom to a location
- Expand cluster
- Show popup (information)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Popup Behavior
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1036005/gisday-cluster-popup.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Popups
- Auto appear (no clicks)
- Centered on map
- Alway visible
- Mobile friendly
- Useful content
- Compliment selected item!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Cluster Behavior
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1036003/gisday-cluster-inactive.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1036004/gisday-cluster-active.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Cluster
- Visual queues for hover
- Auto-expand and contract
- Simple transparency factors in CSS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Implementation
Frontend and Backend Coding
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564390/UC_Section.jpg)
Data
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Feature Service
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
esri-leaflet-geocoder
esri-leaflet-demographic-layer
esri-leaflet-heatmap-feature-layer
esri-leaflet-clustered-feature-layer
esri-leaflet-requirejs-example
esri-leaflet-browserify-example
esri-leaflet
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
The Result?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1035603/gisday-visualdesign-page.png)
Before After
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
< 150 JS
< 200 CSS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
And Usability Testing Says...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564390/UC_Section.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564375/UC_Content.jpg)
Did it allow users to complete the task?
Did it meet the business needs?
Did it meet our success criteria?
Was it a good design?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564390/UC_Section.jpg)
Final Notes
A well-designed "mapplication" is a useful application.
github.com/esri/gis-day-map
slides.com/michaelgaigg - slides.com/alaframboise
@MichaelGaigg @Al_Laframboise
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564390/UC_Section.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1564390/UC_Section.jpg)
Thank you!
-
Please fill out the sessions survey in your mobile app
-
Select "User Interface and User Experience Design for Web Apps"
-
Click "Technical Workshop Survey
-
Answer question and add comments
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1569797/survey.png)
Better UI and UX Design for Mapping Apps - Part II
By alaframboise
Better UI and UX Design for Mapping Apps - Part II
- 5,340