user experience and interface design for web apps @michaelgaigg@al_laframboise
TRANSCRIPT
![Page 1: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/1.jpg)
User Experience and Interface Design for Web Apps@MichaelGaigg @AL_Laframboise
![Page 2: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/2.jpg)
What is good Design?
![Page 3: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/3.jpg)
Which design is better?
A B
![Page 4: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/4.jpg)
Which design is better?
A B
End-User Needs Business Needs
![Page 5: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/5.jpg)
Strategy: End-User Needs
Who are our users?What are they trying to accomplish? How successful are they doing that?
![Page 6: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/6.jpg)
Strategy: Business Needs
Where are we now? Where do we want to go? How do we get there?How do we define success?
![Page 7: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/7.jpg)
What is good Design?
It has a Purpose
=> Define Strategy
=> Define Success
![Page 8: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/8.jpg)
Know your User
![Page 9: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/9.jpg)
usiness Needs
Internal Users
External Users
Make/Save $
skilled trained forced
impatient demanding in a hurry in control
![Page 10: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/10.jpg)
How to create Better
Designs?
![Page 11: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/11.jpg)
Consider the Empty
State
![Page 12: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/12.jpg)
![Page 13: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/13.jpg)
Better Design
![Page 14: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/14.jpg)
Use Task-focused
Workflows
![Page 15: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/15.jpg)
![Page 16: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/16.jpg)
Utilize UI
Patterns
![Page 17: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/17.jpg)
What are UI Patterns?
Solutions to common design problems
Help to avoid re-inventing the wheel
Defined as Problem / Context / Solution
![Page 18: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/18.jpg)
Pattern: Info Window
hat problem does it solve?
o much information on the map.
eds user interaction to disclose.
http://www.designingmapinterfaces.com/patterns/info-window/
![Page 19: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/19.jpg)
Pattern: Info Window
![Page 20: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/20.jpg)
Pattern: Info Window
hat's the solution?
Show useful information Include contextual actions (e.g. buttons, links)Avoid displaying default column namesAvoid meaningless data like ID's or Lat/Long
![Page 21: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/21.jpg)
Anti-Pattern: Empty Info Window
http://www.designingmapinterfaces.com/patterns/empty-info-window/
![Page 22: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/22.jpg)
Anti-Pattern: Empty Info Window
![Page 23: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/23.jpg)
Pattern: Rich Marker
hat problem does it solve?
ed to make a decision but clicking each feature to popup an
oWindow is too cumbersome.
http://www.designingmapinterfaces.com/patterns/rich-marker/
![Page 24: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/24.jpg)
Pattern: Rich Marker
hat's the solution?
Show key metric or performance indicatorUse when the content of the markers is important to make a decision and needs to be seen at a glanceMust be related to task Result set is limited
![Page 25: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/25.jpg)
Utilize UI Patterns
http://www.designingmapinterfaces.com/
tps://www.pinterest.com/michaelgaigg/map-ui-pattern
![Page 26: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/26.jpg)
Invest in Cartography
![Page 27: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/27.jpg)
SSttrratateeggyy:: EEnndd--UUsseerr NeNeeeddss
Who are our users?What are they trying to accomplish? How successful are they doing that?
![Page 28: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/28.jpg)
SSttrratateeggyy:: EEnndd--UUsseerr NeNeeeddss
Who are our users?What are they trying to accomplish? How successful are they doing that?
![Page 29: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/29.jpg)
How to improve Cartography
Follow well established domain conventions & cartographic rulesAvoid simultaneous contrast and color movement Choose your colors wisely
![Page 30: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/30.jpg)
![Page 31: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/31.jpg)
Know your Data
![Page 32: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/32.jpg)
Know what your User knows about your Data
or better
![Page 33: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/33.jpg)
![Page 34: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/34.jpg)
Demo
http://www.usda.gov/wps/portal/usda/usdamedia?navid=kyf-compass-map
![Page 35: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/35.jpg)
Optimize
Visible layers (toggle by theme) Cartography (based on 1 select basemap) Info windows (customized to features) Data display (meaningful grid)
![Page 36: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/36.jpg)
Select the correct Layout
![Page 37: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/37.jpg)
Full Map
No Map
Partial Map
Reference Map
![Page 38: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/38.jpg)
Full MapMap is the focus and the core value
![Page 39: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/39.jpg)
Partial MapWorkflow driven
![Page 40: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/40.jpg)
Wizard with Map Step
![Page 41: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/41.jpg)
Reference MapFor navigation and reference purposes
![Page 42: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/42.jpg)
No MapTask doesn't require a map but utilizes power of GIS
![Page 43: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/43.jpg)
Toggle between Layouts
![Page 44: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/44.jpg)
Focus on the Subject
![Page 45: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/45.jpg)
Focus on the Map
![Page 46: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/46.jpg)
Layouts Summary
Full
Partial
Reference
MMapap
Level of Detail
Level of
Control Tools
Interaction
Cartography
high
high
advanced
advanced
very important
high
med to high
in workflows
advanced ok
important
low to med
none to low
none/few
limited
few distractions
![Page 47: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/47.jpg)
Provide Navigation
![Page 48: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/48.jpg)
10% of time is spent on
navigation from one point
to another
![Page 49: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/49.jpg)
Unified Search
Problem:
Aggregate different data sources intoone disambiguated set of search results.
http://www.designingmapinterfaces.com/patterns/unified-search/
![Page 50: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/50.jpg)
Unified Search
Solution:
Provide single input field that allow searching multiple sourcesIndicate source or nature Show meaningful results Remove duplicates and order by relevance
![Page 51: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/51.jpg)
Browse Geographies
Problem:
Users want to explore places or locations but don't know exactly what they are looking for.
![Page 52: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/52.jpg)
Browse Geographies
Solution:
Let usersbrowse hierarchically structured dataStart simpleSort alphabeticallyShow all options if possible
![Page 53: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/53.jpg)
Navigation Patterns
Location Finder / Geolocate / Unified Search Browse GeographiesBookmarks / Placemarks Home ButtonOverview Map
![Page 54: User Experience and Interface Design for Web Apps @MichaelGaigg@AL_Laframboise](https://reader035.vdocuments.mx/reader035/viewer/2022062409/56649ea85503460f94bab85a/html5/thumbnails/54.jpg)
Today's Problem