Corritore, MCIT Working Connections, June 2004 1 Overview of Website Design Dr. Cindy Corritore...

Corritore, MCIT Working Connections, June 2004 1

Overview of Website Design

Dr. Cindy Corritore

Creighton University

ITM 734Fall 2004


What’s important?

• Consistency – – Can change high view but not the details

• Automatic behavior


Signs of amateurs

• Busy background – keep it white• Busy graphics• Ugly navigation bars/menus• Frames (hold menu constant) – things come up in frame• Linear look of data – big long line without layout• Hit counters• Under construction signs• Blerbs about ‘best seen with’ • Free ads and clutter• Centering


five design principles• clarity

• consistency

• contrast

• [no] clutter

• cinematic storytelling


clarity

• definition– what is the point? the purpose?– what idea/feeling do you want user to get?

• hurdles– clear site will be useful and is well-done (first

impression) - 10 seconds– clear that site is easy to use - 10 seconds– content is interesting and easy to access - 60

seconds


consistency

• helps the user to build their mental model of the site– how things fit together, how they work

• big effort when developing on a team

• relates to– style, metaphor– location– navigation– function, feedback, states, etc.


contrast

• want to intrigue the user, not annoy them– fine balance

• do this with– color (use complementary colors - opposite

side of color wheel)– dimensionality (2D vs. 3D ; in the background)

• if using color, use lots of white space for contrast

• black text


[no] clutter

• overwhelms the user

• steals attention

• feature what is truly important– distill text to essentials and provide

elaboration as a link


cinematic storytelling• make web site like a story

– beginning to excite

– middle with the meat of the content

– end that calls user to action/gives them a payoff

• easter eggs: scatter `gems’ throughout the site - keeps them coming back– fun for surfing visitors and those with specific goals in mind

– pieces of fun trivia, neat links, unexpected useful information


other design concepts• color and fonts

• navigation

• grouping

• feedback

• graphics

• presentation

• general tips


factors affecting color discrimination

• learned Color-Object Familiarity• remember colors better when shown familiar objects (a red apple,

green leaf, etc.) or color is correct for object.

• retinal location• best when objects imaged in fovea - you are looking directly at it - and

falls as the image is seen further in the periphery. • degrades first for red and green and then blue and yellow before

failing completely. • only in large screens

• brief presentation• Short durations impairs discrimination of similar colors. • effect is greater with reds and greens and smaller with blues and

yellows.


color usage• bright colors draw attention• contrasting colors emphasize separateness (ie.

red/green, blue/yellow)• necessary actions in warm colors (red, yellow)• background status in cool (blue/green)• center of visual field: red and green (most rods

there see these well)• periphery: blue, yellow, black, white (see contrast

here)


color usage

• no more than 3 colors per screen (black, white, grey not included)

• use colors sparingly in icons• cultural meanings

– red: stop, hot, warning, financial loss– yellow: warning, caution– green: go, OK– blue: cool– black: financial profit


color usage

• avoid:– red and blue (hard on eyes)– deep blue background– light text on dark (blurs)– blue text for small things (fades)

• good:– contrast

• use colors on opposite sides of color wheel

– redundant cues (eg. red and bold)


design implications• color should be redundant cue – why?

– color blind– can only really differentiate few colors– color interpretation varies– warm appear to move towards, cool away– cultural interpretations

• red US/China

• which colors most sensitive to fovea?– red/yellow

• different colors require refocusing


fonts• bold for emphasis• NO UNDERLINING - shouting• good:

– sans serif (serif little feet)– 10-12 point

• bad:– italics or underlining– colored fonts– changing font size– more than 3 fonts per screen


grouping

• organizes information for the user– you do it explicitly or users will do it

• group:– things that are similar in nature (ie. text)– things that are functionally similar (ie. buttons)

• grouping determined by:– proximity– appearance– white space– use


navigation

• shallow vs. deep – 6-10 max. options on a screen– get to any point in 2-3 clicks– graphical site map essential

• what’s here for me? and how do I get to it?

• “golden path” for best route through site

• clear links so know where you are going (and return links) - know before you go


navigation

• site map is critical– linked graphical map is best

• provide context for page(s) within the site and subareas– via color, structure, graphics

• book metaphor - table of contents always works

• leave a trail of breadcrumbs (path)


feedback

• critical to making an interface usable

• should be readily discernable without being distracting– supports both novice and expert– applies to navigation - when have moved

• feedback on process status (ie. downloads)


graphics

• does it significantly aid in communication?

• consider bandwidth

• technology changes and plug-in’s

• animation– avoid it unless it is crucial (attention)


presentation

• how the information represented/presented to the user– voice– text– graphics


presentation

• density - must balance resolution vs. size– overview vs. specific, detailed information– starfield approach

• clarity & content– clear if user can find what they need– may sacrifice content for clarity

• active vs. passive organization– active - presentation what user wants up front– passive - how make information “findable” by user


general tips

• added value - people are only a click away from leaving, so you must provide a reason to stay/return

• to avoid interrupting flow of the site, layer non-essential support information underneath

• technology is not content • consider bandwidth (50,000K/page

average) and resolution


general tips

• match the technology to the users

• look-feel: make interface as direct, useful, engaging, memorable as possible– metaphors - must be consistent– personality - unique identity and personality

(eg. funny, hip, homey)– style - layout, graphics, typefaces, colors, etc.


to splash or not to splash

• splash page - makes initial impression and can provide unusual site instructions– many users won’t take time to come in– keep it simple so downloads quickly– jury is out-


Examples

• Sun project Looking Glass

• Denim http://guir.berkeley.edu/projects/denim/download/ - download for next week and play with it (for prototyping ideas)

http://guir.berkeley.edu/projects/denim/download/

http://guir.berkeley.edu/projects/denim/download/


readings

• Mountford – – message?– two rules


readings

• Ivory & Hearst– classes of features

they measure• ppt about each

class

PageFormatting

PagePerformance

SiteArchi-tecture

TextElement

s

LinkElement

s

GraphicElement

s

TextFormatting

LinkFormatting

GraphicFormatting


readings

• Shneiderman – background– interesting model of task and interface

• task – 2 aspects (nouns and verbs)• interface – 2 corresponding aspects – metaphors

and plan/actions

– how does this relate to what Ivory & Hearst say?

Date post:	15-Jan-2016
Category:	Documents
Upload:	cullen-lyne
View:	218 times
Download:	0 times

Corritore, MCIT Working Connections, June 2004 1 Overview of Website Design Dr. Cindy Corritore...

Documents