illusion insights into visual design elements

ILLUSION: INSIGHTS INTO VISUAL DESIGN ELEMENTS

OF WEB DESIGN

Deborah Stanley | Robin Fay [email protected] | [email protected] Learning Community: Shift to Visual

VISUAL LITERACY & IMAGES: WHAT IS REAL? WHAT IS MANIPULATED?

HOW INFORMATION IS CONVEYED ON THE WEB > WEB PAGE DESIGN:LAYOUTGRAPHICAL ELEMENTSTEXTNAVIGATION HOW DO WE DESIGN FOR THE NET GENERATION?

Illusion:

Insights into Visual Design Elements of Webdesign

Illusion:


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?

Illusion:


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."

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:


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:


Illusion:


• Layouto 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 websiteo 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:


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:


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:


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:


Typography: Sans serif vs. serifo 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:


Complementary colors reside across from each other on the color wheel: they are very high contrast when paired together.

Illusion:


Color

Analogous colors are adjacent on the color wheel and they are harmonious.They are combinations often found in nature.

Illusion:


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:


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:


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:


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:


Illusion:


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

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:


Usability Testing:

task-based, with observation and "talk aloud"terminologyopen-ended questions card-sort exercise

observe real interactions with sitehave "evidence" for decision-makersLet's look at some examples fromUGA Libraries... evolution of a design.

Illusion:


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 pagesfor projects? If so, how does their work reflectthe "shift to the visual"?

Illusion:


illusion insights into visual design elements

Technology

web design

design easier

visual literacyimages

visual cues

webweb page design

navigation navigation

common navigational

color wheel