Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Design principles applied to map design & usabi...
Search
Sergio Álvarez Leiva
October 01, 2011
Design
9
1k
Design principles applied to map design & usability
Keynote for my session at #FOSS4G 2011
Sergio Álvarez Leiva
October 01, 2011
Tweet
Share
More Decks by Sergio Álvarez Leiva
See All by Sergio Álvarez Leiva
Dynamic, Interactive maps for the new web
saleiva
8
1.4k
Visualization everywhere
saleiva
4
310
Cartodb at medialabprado
saleiva
2
360
Other Decks in Design
See All in Design
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
530
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4k
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
2.8k
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
260
Design System for training program
mct
0
170
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
310
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
62k
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
110
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
210
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
200
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
760
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
340
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
The Cult of Friendly URLs
andyhume
78
6.2k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
YesSQL, Process and Tooling at Scale
rocio
170
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
510
It's Worth the Effort
3n
184
28k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Building Applications with DynamoDB
mza
93
6.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Optimizing for Happiness
mojombo
376
70k
Transcript
Hello,
vizzuality Lead designer & co-founder
None
None
None
None
15 Design principles you should apply *always*
_Classical Conditioning A technique used to associate a stimulus with
an unconscious physical or emotional response.
None
None
_Aesthetic Effect Aesthetic designs are *perceived* as easier to use
and better, than less-aesthetic designs.
None
NIXON
KENNEDY
None
None
None
None
None
_Golden Ratio A ration within the elements of a form,
such a height to width, approximating 0.618.
None
None
None
_Forms follow function Form in design results from purity of
function.
None
You can find this map at mapbox.com
You can find this map at mapbox.com
_Affordance A property in which physical characteristics of an object
or environment influence its function.
None
Pull
Push
None
None
_Consistency & Constraint The usability of a system is improved
when similar parts are expresed in similar ways.
None
None
Zoom & movement controls Layers
None
None
_Fitt's law The time required to move to a target
is a function of the target size and distance to the target - plus the precision needed -.
None
None
None
None
None
_Forgiveness Designs should help people avoid errors and minimize the
negative consequences of errors when they do occur.
None
None
None
_Use of Color Color is used in design to attract
attention, group elements, indicate meaning, and enhance aesthetics.
__Number of colors No more than 4-5 colors.
You can find this map at mapbox.com
__Color combinations Something aesthetic please. Protip! colorbrewer2.org
__Saturation More saturated for attracting attention. More saturated more eye
fatigue.
None
__Meaning Analyze your colors meaning before aplying them.
None
_Interference Effects A phenomenon in which mental processing is made
slower and less accurate by competing mental processes.
Black Red Yellow Purple Green Blue Yellow Red White White
Blue Green Black Brown Orange Green Orange Yellow Red
_Nudge A method for predictably altering behavior without restricting options
or signicantly changing incentives.
None
None
None
_Inantentional Blindness The failure to cognitively process a stimulus that
is presented in clear view, leaving the observer without any awareness or memory of the stimulus.
None
_Progressive disclosure A strategy for managing information complexity in which
only necessary or requested information is displayed at any given time.
None
None
None
_Visibility The usability of a system is improved when its
status and methods of use are clearly visible.
None
None
None
None
None
None
None
Thank you! @saleiva
[email protected]
None
None
_Framing A technique that influences decision making and judgement by
manipulating the way information is presented.
Gas kills over 100 Hostages “
“ Gas saves over 500 hostages
None
None