User Experience and Interface Design for Web Apps

@MichaelGaigg        @AL_Laframboise

What is good Design?

Which design is better?

A

B

Which design is better?

A

B

End-User Needs

Business Needs

Strategy: End-User Needs

  • Who are our users?
  • What are they trying to accomplish?
  • How successful are they doing that?

Strategy: Business Needs

  • Where are we now?
  • Where do we want to go?
  • How do we get there?
  • How do we define success?

What is good Design?

It has a Purpose

 

=> Define Strategy

=> Define Success

How to create

Better Designs?

Consider the

Empty State

Better Design

Use Task-focused

Workflows

Sketch Design Ideas (aka Wireframes)

Why?

Let's do Wireframes

  • Iterate design (conceptual) ideas

  • First visual presentation of a problem

  • Help identify missing requirements (gaps)

Utilize

UI Patterns

What are UI Patterns?

  • Solutions to common design problems

  • Help to avoid re-inventing the wheel

  • Defined as Problem / Context / Solution

Browse Geographies

Problem:

 

Users want to explore places or locations but don't know exactly what they are looking for.

Browse Geographies

Solution:

 

  • Let users browse hierarchically structured data
  • Start simple
  • Sort alphabetically
  • Show all options if possible

Info Window

Problem:

 

Too much information on the map. 

Need to wait for user interaction to disclose.

http://www.designingmapinterfaces.com/patterns/info-window/

Info Window

Solution:

 

  • Show useful information
  • Include contextual actions (e.g. buttons, links)
  • Avoid displaying default column names
  • Avoid meaningless data like ID's or Lat/Long

Info Window - Examples

https://www.pinterest.com/michaelgaigg/map-ui-patterns/

Empty Info Window

http://www.designingmapinterfaces.com/patterns/empty-info-window/

Empty Info Window

Rich Marker

Problem:

 

Need to make a decision but clicking on each feature to popup InfoWindow is too cumbersome.

http://www.designingmapinterfaces.com/patterns/rich-marker/

Rich Marker

Solution:

 

  • Show key metric or performance indicator
  • Use when the content of the markers is important to make a decision and needs to be seen at a glance
  • Must be related to task
  • Result set is limited

Unified Search

Problem:

 

Aggregate different data sources into one disambiguated set of search results.

http://www.designingmapinterfaces.com/patterns/unified-search/

Unified Search

Solution:

 

  • Provide single input field that allow searching multiple sources
  • Indicate source or nature 
  • Show meaningful results
  • Remove duplicates and order by relevance

Utilize UI Patterns

http://www.designingmapinterfaces.com/

https://www.pinterest.com/michaelgaigg/map-ui-patterns/

Select the correct Layout

Full Map

No Map

Partial Map

Reference Map

Full Map

Map is the focus and the core value

Partial Map

Workflow driven

Wizard with Map Step

Reference Map

For navigation and reference purposes

Focus on the Subject

No Map

Task doesn't require a map but utilizes power of GIS

Layouts Summary

Full

Partial

Reference Map

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

low to med

few

limited

few distractions

Got Trends?

Typography

  • Bigger, bolder, better differentiated

  • Responsive typography

  • Proxima Nova, Open Sans, Futura

Cartography

  • Look of the map is crucial

  • Has to have purpose

  • Use during Wireframing

Material Design

  • Visual language grounded in tactile reality

  • Think bold, graphical and intentional

  • Meaningful motions

http://www.google.com/design/spec/material-design/

Being unique

  • Don't just chew on icon libraries over and over again

  • Re-think when one size fits all templates make sense

Design First

  • Wireframe before coding

  • Designer as a boardroom presence

Mobile First

  • Think tasks

  • Think minimal

  • Think gestures

Vector & 3D

  • SVG, D3

  • New challenges with 3D

Modules over pages

  • Map as a module

  • Flexibility to extract portions for sharing on social

  • Re-use wireframes (UI patterns)

Visual Design

  • Card-based

  • Flat

  • Bold background images with subtle parallax effects

Use Libraries

  • Dojo Bootstrap: https://github.com/Esri/dojo-bootstrap-map-js

  • Dojo theming: https://github.com/Esri/dojo-theme-flat

  • Font Awesome: http://fortawesome.github.io/Font-Awesome/

Today's Problem

User Experience and Interface Design for Web Apps

By Michael Gaigg

User Experience and Interface Design for Web Apps

Presented at the Esri Developer Summit 2015 in Palm Springs, CA

  • 1,849
Loading comments...

More from Michael Gaigg