web design. what is eye-tracking? studies use a camera to track the eyes of an internet viewer and...
TRANSCRIPT
![Page 1: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/1.jpg)
Web Design
![Page 2: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/2.jpg)
What is eye-tracking?
• Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”
Here’s what we know. . . .
![Page 3: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/3.jpg)
Effective LayoutNAVIGATION BAR
Across the top and/or vertical left. Remains constant on every page. Buttons not too large, type not too small.
BANNERThe graphic that spans across the top and unifies the page. Often contains headline
LOGOLogo upper left (84%) or upper center (16%).Never at bottom of a scrolled page or on the right.
COLUMNS2 or 3 short columns and short paragraphs divided by space. (Long text is hard to read horizontally or vertically).
![Page 4: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/4.jpg)
Layout Terms
NAVIGATION BARUnder Banner is common
BANNER IMAGESThe banner spans across the top, contains the logo, and usually contains an image that is organic and curved, to contrast with the rectangles on the page.
TYPE HIERARCHY
Small body text type (no larger than 12 point usually. Larger subheadings
CONTENT IMAGES / TEXT
Short columns and short paragraphs divided by space include image and text side by side.
![Page 5: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/5.jpg)
Variations
LARGE BANNERRetailers and visual marketers go large
![Page 6: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/6.jpg)
![Page 7: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/7.jpg)
VARIATION Left Menu, Top Navigation Bar, Small Banner, Large Billboard
![Page 8: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/8.jpg)
Why do logos almost never appear in the upper right
or bottom areas of a page?
![Page 9: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/9.jpg)
What would happen if the logo were here?
![Page 10: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/10.jpg)
Most people do not keep their browser windows fully open. The right and bottom get cut off.
![Page 11: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/11.jpg)
Student Portfolio Web Sites
• The following examples are from recent student web sites.
• Make sure your home page tells what you are offering (e.g., what kind of designer you are) and positions you as a professional, not as a student or hobbyist.
![Page 13: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/13.jpg)
![Page 14: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/14.jpg)
C.R.A.P. FormulaA funny way to remember 4 good
design principles
![Page 15: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/15.jpg)
C.R.A.P.
R. REPETITION (3 ex)
A. ALIGNMENT (1 ex)
P. PROXIMITY
C. CONTRAST (1 ex)
These are examples of good ways to incorporate the web design principles.
![Page 16: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/16.jpg)
Banner Techniques
![Page 17: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/17.jpg)
Banner Images
Curvilinear to contrast with rectilinear shapes
Alignment of images w/ columns
Breakout borders (head)
Photos with people
![Page 18: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/18.jpg)
BannerImages
Curvilinear to contrast with rectilinear shapes
Alignment of images w/ columns
Breakout borders (head)
Photos with people
![Page 19: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/19.jpg)
MastheadImages
Curvilinear to contrast with rectilinear shapes
Alignment of images w/ columns
Breakout borders (head)
Photos with people
![Page 20: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/20.jpg)
Critique This
![Page 21: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/21.jpg)
![Page 22: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/22.jpg)
Graphics Techniques
![Page 23: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/23.jpg)
Graphics
Photos
3D effects
Icons / Bullets
![Page 24: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/24.jpg)
Graphics
Organic / traditional elements
![Page 25: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/25.jpg)
Splash Page Cons
• Viewers don’t like splash pages.
• Becomes an obstacle hiding what they really want (content).
![Page 26: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/26.jpg)
![Page 27: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/27.jpg)
![Page 28: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/28.jpg)
![Page 29: Web Design. What is eye-tracking? Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”](https://reader038.vdocuments.site/reader038/viewer/2022110101/56649e6b5503460f94b68b7d/html5/thumbnails/29.jpg)
QUESTIONS?
© 2007 Juliet Davis