56
DESIGN IN GIS Tomáš Sasko

Design in GIS (FMG 2014)

Embed Size (px)

DESCRIPTION

Design and front-end user experience in GIS are not covered at all and I think this is main cause why GIS is not used by public widely. Here is my speech about this topic on Forum of Young Geoinformatics in Zvolen, where G-BASE was general partner of conference.

Citation preview

Page 1: Design in GIS (FMG 2014)

DESIGN IN GISTomáš Sasko

Page 2: Design in GIS (FMG 2014)

WHY WE SHOULD BOTHER WITH DESIGN IN GIS?

Page 3: Design in GIS (FMG 2014)
Page 4: Design in GIS (FMG 2014)

DEVELOPERS

Page 5: Design in GIS (FMG 2014)

BRIAN TIMONEY

Why map portals don’t work

Page 6: Design in GIS (FMG 2014)

–Brian Timoney

„People don’t like to work with a map, unless it is necessary.“1

Page 7: Design in GIS (FMG 2014)
Page 8: Design in GIS (FMG 2014)

–Brian Timoney

„More layers automatically don’t make the user happier.“2

Page 9: Design in GIS (FMG 2014)
Page 10: Design in GIS (FMG 2014)

Decision-making paralysis

Page 11: Design in GIS (FMG 2014)

–Brian Timoney

„The only requirements for geoportal are these: FAST - INTUITIVE - INFORMATIVE - FAST.

Exactly in this order.“3

Page 12: Design in GIS (FMG 2014)
Page 13: Design in GIS (FMG 2014)

–Brian Timoney4 „Icon-laden toolbars are a desktop thing, not a web thing. “

Page 14: Design in GIS (FMG 2014)

Colleague: What do you have going on here?!

Brian: On-the-fly buffering and intersecting tools!!

Colleague:  What’s a buffer?!

Brian:  [Exit stage left, muttering under breath]

Page 15: Design in GIS (FMG 2014)
Page 16: Design in GIS (FMG 2014)

5

Page 17: Design in GIS (FMG 2014)

–Brian Timoney

„Let’s take the value of our users’ time and don’t let him wait.“5

Page 18: Design in GIS (FMG 2014)

GLOBAL DESIGN TRENDS

Page 19: Design in GIS (FMG 2014)

MINIMALISM

Page 20: Design in GIS (FMG 2014)

RESPONSIVITY

Page 21: Design in GIS (FMG 2014)

FLAT DESIGN

Page 22: Design in GIS (FMG 2014)

RETINA READY

Page 23: Design in GIS (FMG 2014)
Page 24: Design in GIS (FMG 2014)

BANSKOBYSTRICKÝSAMOSPRÁVNY KRAJ

Page 25: Design in GIS (FMG 2014)
Page 26: Design in GIS (FMG 2014)
Page 27: Design in GIS (FMG 2014)
Page 28: Design in GIS (FMG 2014)
Page 29: Design in GIS (FMG 2014)
Page 30: Design in GIS (FMG 2014)

HOW THE “INTUITIVE” IS BORN?

Page 31: Design in GIS (FMG 2014)

EXPERIMENT

Page 32: Design in GIS (FMG 2014)

EXPERIMENT

Page 33: Design in GIS (FMG 2014)
Page 34: Design in GIS (FMG 2014)

–Stephen Anderson

“A boundary of human perception between how something looks and how it works is a bit artificial.”

Page 35: Design in GIS (FMG 2014)

UX DESIGN

Page 36: Design in GIS (FMG 2014)

UX DESIGN

Page 37: Design in GIS (FMG 2014)

USER EXPERIENCE DESIGN

Page 38: Design in GIS (FMG 2014)

Developer watching videotape of usability test

Page 39: Design in GIS (FMG 2014)
Page 40: Design in GIS (FMG 2014)
Page 41: Design in GIS (FMG 2014)
Page 42: Design in GIS (FMG 2014)

A/B TESTING

Page 43: Design in GIS (FMG 2014)
Page 44: Design in GIS (FMG 2014)

HOW I WORK?

Page 45: Design in GIS (FMG 2014)

Pencil and squared paper

Page 46: Design in GIS (FMG 2014)
Page 47: Design in GIS (FMG 2014)
Page 48: Design in GIS (FMG 2014)
Page 49: Design in GIS (FMG 2014)

WIREFRAME MODELS

Page 50: Design in GIS (FMG 2014)

WIREFRAME MODELS

How to became a promoterTabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a tabs plugin that can be used to integrate the latter.

How it worksTabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a tabs plugin that can be used to integrate the latter. Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a tabs plugin that can be used to integrate the latter.

210 x 150

Subscription plan

$GG��IRUP�VWDFNHG�WR�\RXU�IRUP·V�+70/�DQG�\RX·OO�KDYH�ODEHOV�RQ�WRS�RI�WKHLU�fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.

Register NowRegister Now

SearchYellowPosters Posters Add Poster Filter Promoter zoneWatchlist

210 x 150

Subscription plan

$GG��IRUP�VWDFNHG�WR�\RXU�IRUP·V�+70/�DQG�\RX·OO�KDYH�ODEHOV�RQ�WRS�RI�WKHLU�fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.

Register NowRegister Now

210 x 150

Subscription plan

$GG��IRUP�VWDFNHG�WR�\RXU�IRUP·V�+70/�DQG�\RX·OO�KDYH�ODEHOV�RQ�WRS�RI�WKHLU�fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.

Register NowRegister Now

This is footer of yellowposters.com with copyright, maybe contact info legal notice and other stuff

E-mail

Password Login

Page 51: Design in GIS (FMG 2014)

YED

Page 52: Design in GIS (FMG 2014)

PIXEL PERFECT DESIGN

Page 53: Design in GIS (FMG 2014)

BOOTSTRAP

Page 54: Design in GIS (FMG 2014)

SUBLIME TEXT 2

Page 55: Design in GIS (FMG 2014)

ADOBE EDGE REFLOW

Page 56: Design in GIS (FMG 2014)

POWER POINT / KEYNOTE