visual design principles - vilniaus...
TRANSCRIPT
![Page 1: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/1.jpg)
Visual design principles
dr. Kristina Lapin
Projektas Informatikos ir programų sistemų studijų programų kokybės gerinimas ( VP1-2.2-ŠMM-07-K-02-039)
![Page 2: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/2.jpg)
Outline
• Attention and scrolling
• Gestalt laws and interface design
• Introduction to information design
1
![Page 3: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/3.jpg)
How to draw attention
to a specific area?
4
Sąmonė ir pažinimas AtminisAtminties procesai
![Page 4: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/4.jpg)
Attention and scrolling
• The first Web systems (1994-1996)
–Users did not scroll
– Later users acclimated to scroling
• Page fold
–viewable information without scrollling
– the important information should be visible
6
http://www.useit.com/alertbox/scrolling-attention.html
![Page 5: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/5.jpg)
Attention focuse at the top
• Eye tracking studies: number of gaze fixations
– 80% above the fold
– Max 300-400 pixel
– Last element
7 http://www.useit.com/alertbox/scrolling-attention.html
![Page 6: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/6.jpg)
Scrolling behaviors
• Usually
– Intense viewing on thetop
– Moderate in themiddle
– Superficial on thebottom
• Sometimes
– Many fixation belowthe screen (first leftpicture)
8 http://www.useit.com/alertbox/scrolling-attention.html
![Page 7: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/7.jpg)
Scrolling or paging?
9
![Page 8: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/8.jpg)
Horizontal scrolling
• Maksimal attention
– 300-500 pixels
• Two column layout
– Left part: 69%
– Right: 30%
– Behing: 1%
10
![Page 9: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/9.jpg)
Drawing attention
Center vision
Messages, colors
Side vision
Changing big areas
11
Sąmonė ir pažinimas Atminties procesai
![Page 10: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/10.jpg)
Distractions
• Visual clutter
12
9 spalvos 5 spalvos
![Page 11: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/11.jpg)
Visual clutter
13
http://www.disneylandparis.com/
![Page 12: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/12.jpg)
PSICHOLOGICAL PRINCIPLES AND INTERFACE DESIGN
Gestalt principles
![Page 13: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/13.jpg)
Intuitive perception guidelines:Gestalt laws
• Proximity
• Continuity
• Part-whole
• Similarity
• Closure
• Simplicity
• Simetry
• Parallel
15
![Page 14: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/14.jpg)
Gestalt laws
• Proximity
16
![Page 15: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/15.jpg)
Proximity to organize buttons
Equal distances in Windows Vista
Buttons in OS X ir SpiderOak cloud
![Page 16: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/16.jpg)
Similarity
Similar type file as blocksUnordered files – difficult to
understand
![Page 17: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/17.jpg)
Continuity
• Scrollbar refers the invisible part
– indicates that about 80% is visible
![Page 18: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/18.jpg)
Closure
• we perceive as a connection
– bit it is not continous
Gestalt principai
Paieškos langas OS X
![Page 19: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/19.jpg)
Principles for memory and attention
• Short-term memory– George Miller lae (1956):
• short-time memory is limited to 7 ± 2 small chunks=
– Cowan (2002): 4 ± 1
• Chunked dialogs
![Page 20: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/20.jpg)
Principles for memory and attention
• Time limitations– memories in short-term memory persist for
only 30 sec.,
– Important information should be more persistent
![Page 21: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/21.jpg)
Principles for memory and attention
• Recognition
– menu shows available options
– images help selection
![Page 22: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/22.jpg)
Principles for memory and attention
• Recall
– autocomplete help to recall the names• airports
![Page 23: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/23.jpg)
Principles for memory and attention
• colours
– maximum 5 + 2
– use central and peripheral colours
– do not use simultaneous high-chroma, spectral colours
– Use familiar consistent codings with appropriate references
![Page 24: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/24.jpg)
Information design
• Goal – present large amount of data in easily understandable form
1. Sir Edward Playfair (XVII a.), Jacques Bertin (1981)
– the proper representation helps to solve the problem
![Page 25: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/25.jpg)
Harry Beck’sLondon underground rail
network
.
![Page 26: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/26.jpg)
Information design
• gestalt laws
![Page 27: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/27.jpg)
Wurman, Understanding USA (2000)
http://designarchives.aiga.org/#/entries/%2Bid%3A83/_/detail/relevance/a
sc/0/7/83/understanding-usa-website/1
![Page 28: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/28.jpg)
Interaktive visualizations
• Ben Shneiderman
–overview first
– zoom and filter
– then details on demand
![Page 29: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/29.jpg)
Film finder, Ahlberg, Shneiderman (1994
![Page 30: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/30.jpg)
Film finder, Ahlberg, Shneiderman (1994)
![Page 31: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/31.jpg)
ConeTree
• 3D file system tree
![Page 32: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/32.jpg)
smartMoney.com
• stock market
• colours – changes in values
• blocks – companies
• mousing over the block
– shows name,
• clicking
– details
![Page 34: Visual design principles - Vilniaus universitetasweb.vu.lt/.../files/2016/11/12_Visual_design_principles.pdf2016/11/12 · Visual design principles dr. Kristina Lapin Projektas Informatikos](https://reader034.vdocuments.us/reader034/viewer/2022043004/5f86dbab0c98dd380c6704ad/html5/thumbnails/34.jpg)
Reading
• David Benyon. Designing Interaction Systems: A comprehensive guide to HCI and interaction design.
– in second edition: chapter 14. Interface design: visual aspects
1