User Experience and Interface Design for Web Apps - II
This is a working app.
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?
- Graphical Design
We need a map.
We need a map.
We need to solve a problem!
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
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
Call to "Maction"?
Use of space?
Search for events?
User Story, Workflows, State diagrams
User Stories/Use Cases
- Primary - Search for place or event name
- Take them to an event
- Display information
- Secondary - Search via map controls
- 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
Disposable, Simplified Sketch
Unified Search - place + event
Satisfied with Design?
Test against use cases and workflow.
Did it allow user to accomplish task?
Colors, Schemes, Fonts...
Map UI Behaviors
Select an Event
- Zoom to a location
- Expand cluster
- Show popup (information)
- Auto appear (no clicks)
- Centered on map
- Alway visible
- Mobile friendly
- Useful content
- Compliment selected item!
- Visual queues for hover
- Auto-expand and contract
- Simple transparency factors in CSS
Frontend and Backend Coding
< 150 JS
< 200 CSS
And Usability Testing Says...
Was it a good design?
A well-designed "mapplication" is a useful application.
slides.com/michaelgaigg - slides.com/alaframboise
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
Better UI and UX Design for Mapping Apps - Part II