ILLUSION: INSIGHTS INTO
VISUAL DESIGN ELEMENTS
OF WEB DESIGN
Deborah Stanley | Robin Fay
deb2611@gmail.com | georgiawebgur...
VISUAL LITERACY & IMAGES: WHAT IS REAL? WHAT IS MANIPULATED?
HOW INFORMATION IS CONVEYED ON THE WEB > WEB PAGE DESIGN:
LAY...
Illusion:
Insights into Visual Design Elements of Webdesign
USABILITY 
HOW DO PEOPLE PERCEIVE AND PROCESS INFORMATION ON T...
Illusion:
Insights into Visual Design Elements of Webdesign
John Kupersmith: http://www.techinlibraries.com/kupersmith.pdf...
Jakob Nielsen: http://www.useit.com/alertbox/9710a.html
Web pages have to employ scannable text, using:
• highlighted keyw...
Layout
o rule of thirds
 The rule states that an image should be imagined as divided into nine
equal parts by two equally...
Illusion:
Insights into Visual Design Elements of Webdesign
• Layout
o focal point, for the purpose of art and design, is the focus on a point of
interest.
o Balance / unbalance: an ...
Navigation
Navigation is the means of guiding users around a website, so that they know
how to find things. One of the bas...
Navigation
• Google “heatmap” research: areas of the page where users look most:
http://www.rocketface.com/organize_websit...
Navigation
• Add label tags to forms and images so they can be read by screen readers
• Number of clicks: used to be rule ...
Typography: Sans serif vs. serif
o http://www.fonttester.com/
o Generally, sans serif is considered to more
readable on a ...
Complementary colors reside across
from each other on the color wheel: they
are very high contrast when paired
together.
I...
Analogous colors are adjacent on
the color wheel and they are
harmonious.They are combinations
often found in nature.
Illu...
 Triad or tertiary colors are 3 evenly 
spaced colors on the color wheel. 
http://www.colorschemedesigner.com/
 
Color the...
Considerations: 
• Color blindness: the inability to distinguish between certain 
reds and greens
• Bright colors/high con...
Considerations: 
• Color has psychological and cultural values, too
• Color has warm and cool values
 Psychology of color:...
Photos
 
Adding photos of real people increases credibility (as long as they are not too 
casual) and makes the site more ...
Illusion:
Insights into Visual Design Elements of Webdesign
Web Page Preferences: Baby Boomers and Gen Y: a study using ey...
Stanford's Web Credibility Project: http://credibility.stanford.edu/ 
 
-- includes guidelines on how to make your site lo...
Usability Testing:
task-based, with observation and "talk aloud"
terminology
open-ended questions 
card-sort exercise
obse...
Discussion questions:
Have you designed web pages for students? How do you take into account the
visual (as opposed to tex...
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elements
Upcoming SlideShare
Loading in …5
×

Illusion Insights Into Visual Design Elements

2,976
-1

Published on

A presentation and discussion on webdesign, design elements, and usability by robin fay, georgiawebgurl@gmail.com and deborah stanley.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,976
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • We have talked about visual literacy and the use of images and what is real or manipulated. 
     
    But another important aspect of how information is conveyed on the web is web page/site design, e.g. layout, navigation, page design.
     
    Along with teaching students to evaluate what they find on the web, we need to take into account their visual learning habits when designing web pages for them.
    Young people in particular don't read web pages -- they scan.
    Web sites are teaching tools >
    Users receive cues from environment
  • Libraries are trying to make their web sites more usable so that library instruction can focus on evaluation of what students find, rather than the processes of getting to a database, combining search terms, etc.
  • Deborah 1-5
    Robin 6-9
    Deborah 10-
  • Our first graphical home page
     
    items on the left had rollovers
     
    some confusion about terminology, e.g. 'about us' and 'collections'
    montage
  • attempts to incorporate more info
    concern about items in top right and under banner (although they initially tested OK in usability testing, but were testers trying harder than in real life?)
    continued with the rollovers
  • We never used this
    Too much text?
    Attempt to make rollovers more visible
    Would people notice all the links to the right?
    First iteration of search box
  • Major redesign
    Wanted to bring as much to the top as possible
    People noticed main services to the left
    Change to lists was popular with users, but later we felt there might be too much text, and they were not always seeing "More information" links
  • Attempt to add more promotional space
    4 boxes of lists very popular on library sites a couple of years ago. Libraries have so much content. Drop-down menus more noticeable than "More information" links.
    Most important info is in Search Shortcuts and the 4 link boxes.
    Tabbed search box to incorporate functionality on home page.
    Trying to shoe horn in multimedia and RSS streams!
    In usability testing, students have increasingly gravitated towards site search box over the years.
    Planning a new design, with less content.
  • Illusion Insights Into Visual Design Elements

    1. 1. ILLUSION: INSIGHTS INTO VISUAL DESIGN ELEMENTS OF WEB DESIGN Deborah Stanley | Robin Fay deb2611@gmail.com | georgiawebgurl@gmail.com Faculty Learning Community: Shift to Visual
    2. 2. VISUAL LITERACY & IMAGES: WHAT IS REAL? WHAT IS MANIPULATED? HOW INFORMATION IS CONVEYED ON THE WEB > WEB PAGE DESIGN: LAYOUT GRAPHICAL ELEMENTS TEXT NAVIGATION HOW DO WE DESIGN FOR THE NET GENERATION? Illusion: Insights into Visual Design Elements of Webdesign
    3. 3. Illusion: Insights into Visual Design Elements of Webdesign USABILITY  HOW DO PEOPLE PERCEIVE AND PROCESS INFORMATION ON THE WEB? HOW DO THEY LOOK AT A PAGE OR A SITE? WHERE IS THE EYE DRAWN TO? DO THEY READ? WHAT EFFECT DO IMAGES HAVE? WHAT GIVES A SITE CREDIBILITY?
    4. 4. Illusion: Insights into Visual Design Elements of Webdesign John Kupersmith: http://www.techinlibraries.com/kupersmith.pdf "Seen in a larger perspective, usability focuses on the user’s entire experience with the online library: what users bring to it in terms of perceptions, vocabulary, and Internet conventions they may be familiar with; how they interact with it; and how this interaction can be improved. In this sense, it encompasses both assessment and web design."
    5. 5. Jakob Nielsen: http://www.useit.com/alertbox/9710a.html Web pages have to employ scannable text, using: • highlighted keywords (hypertext links serve as one form of highlighting; typeface variations and color are others) • meaningful sub-headings (not "clever" ones) • bulleted lists • one idea per paragraph (users will skip over any additional ideas if they are not caught by the first few words in the paragraph) • the inverted pyramid style, starting with the conclusion • half the word count (or less) than conventional writing Let's look at some specifics... Illusion: Insights into Visual Design Elements of Webdesign
    6. 6. Layout o rule of thirds  The rule states that an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally- spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections -- Wikipedia, 2010. Illusion: Insights into Visual Design Elements of Webdesign
    7. 7. Illusion: Insights into Visual Design Elements of Webdesign
    8. 8. • Layout o focal point, for the purpose of art and design, is the focus on a point of interest. o Balance / unbalance: an even mix of elements create a more harmonious website; unbalanced can create a dynamic website o Use of white space (empty space)is the space between the elements, e.g., space around text, images, etc. Too much white space is bad; too little white space is equally bad! Illusion: Insights into Visual Design Elements of Webdesign
    9. 9. Navigation Navigation is the means of guiding users around a website, so that they know how to find things. One of the basic rules of navigation is no surprises -- navigation should be relevant and logical. Common navigational elements in a website are: home (the front or main page), search and about/contact. Navigation is one of the key structural ingredients of a website. Illusion: Insights into Visual Design Elements of Webdesign
    10. 10. Navigation • Google “heatmap” research: areas of the page where users look most: http://www.rocketface.com/organize_website/webpage_hotspots.html   • People ignore the banner, as they think of it as just advertising/logo. Do not put important info/navigational elements up there.   • People scan text, rather than read it. Don't have "click here" links -- they are meaningless when scanning. Illusion: Insights into Visual Design Elements of Webdesign
    11. 11. Navigation • Add label tags to forms and images so they can be read by screen readers • Number of clicks: used to be rule of thumb that everything should be reached by 3 clicks if possible. But users are now more willing to click if they can see a clear path. • Scrolling -- good idea to keep most important info "above the fold", but people will scroll if you give visual cues that there is more info below, i.e. make it obvious that a section continues below the fold. Illusion: Insights into Visual Design Elements of Webdesign
    12. 12. Typography: Sans serif vs. serif o http://www.fonttester.com/ o Generally, sans serif is considered to more readable on a web or electronic device. Serifed fonts are generally better for printed pages. o True Type fonts are standard are many computers and digital devices, which makes design easier because display is generally consistent. Illusion: Insights into Visual Design Elements of Webdesign
    13. 13. Complementary colors reside across from each other on the color wheel: they are very high contrast when paired together. Illusion: Insights into Visual Design Elements of Webdesign Color
    14. 14. Analogous colors are adjacent on the color wheel and they are harmonious.They are combinations often found in nature. Illusion: Insights into Visual Design Elements of Webdesign
    15. 15.  Triad or tertiary colors are 3 evenly  spaced colors on the color wheel.  http://www.colorschemedesigner.com/   Color theory @   http://www.tigercolor.com/color- lab/color-theory/color-theory-intro.htm Illusion: Insights into Visual Design Elements of Webdesign
    16. 16. Considerations:  • Color blindness: the inability to distinguish between certain  reds and greens • Bright colors/high contrast combinations draw the eye and  should be used sparingly • Text should have a high value difference between its  background, e.g., black on white     Check for color blindness:  http://colorfilter.wickline.org/  http://www.vischeck.com/vischeck/vischeckURL.php  Illusion: Insights into Visual Design Elements of Webdesign
    17. 17. Considerations:  • Color has psychological and cultural values, too • Color has warm and cool values  Psychology of color: http://www.infoplease.com/spot/colors1.html Meaning of color: http://www.smashingmagazine.com/2010/01/28/color-theory- for-designers-part-1-the-meaning-of-color/ Illusion: Insights into Visual Design Elements of Webdesign
    18. 18. Photos   Adding photos of real people increases credibility (as long as they are not too  casual) and makes the site more welcoming. But if people look too beautiful and  model-like, that also decreases credibility. Illusion: Insights into Visual Design Elements of Webdesign
    19. 19. Illusion: Insights into Visual Design Elements of Webdesign Web Page Preferences: Baby Boomers and Gen Y: a study using eye-tracking • people like looking at images of people's faces • prefer one image on a page to multiple small ones • prefer clean pages to busy/cluttered pages, defined as too much content, not  enough spacing, too many colors • "A clean web page has little on it and is consistent." • both generations prefer large fonts and little text • Baby Boomers read more on a web page than Gen Y • both generations say they prefer a search bar to many links, but Gen Y rely on it more than Baby Boomers • expect search box to be top right; don't notice it if elsewhere • both generations look most at main part of page (center),  then top, then bottom least Appeal of Web Page Layout and Characteristics Based on Age: Usability Research through Eye Tracking at Fidelity Investments Inc. Daniel Capozzo, MIS, Robert L. Groezinger, MI, Keet-Fung F.  Ng, MIS, Marisa J. Siegel, MIS. http://www.wpi.edu/Pubs/E-project/Available/E-project-042208- 111154/unrestricted/Fidelity_MQP_2008.pdf
    20. 20. Stanford's Web Credibility Project: http://credibility.stanford.edu/    -- includes guidelines on how to make your site look credible:  http://credibility.stanford.edu/guidelines/index.html     • transparency • ease of use • professionalism • authority Illusion: Insights into Visual Design Elements of Webdesign
    21. 21. Usability Testing: task-based, with observation and "talk aloud" terminology open-ended questions  card-sort exercise observe real interactions with site have "evidence" for decision-makers Let's look at some examples from UGA Libraries... evolution of a design. Illusion: Insights into Visual Design Elements of Webdesign
    22. 22. Discussion questions: Have you designed web pages for students? How do you take into account the visual (as opposed to textual) nature of the web? Have you asked students to create web pages for projects? If so, how does their work reflect the "shift to the visual"? Illusion: Insights into Visual Design Elements of Webdesign
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×