Presentation is loading. Please wait.

Presentation is loading. Please wait.

Corritore, MCIT Working Connections, June 2004 1 Overview of Website Design Dr. Cindy Corritore Creighton University ITM 734 Fall 2004.

Similar presentations


Presentation on theme: "Corritore, MCIT Working Connections, June 2004 1 Overview of Website Design Dr. Cindy Corritore Creighton University ITM 734 Fall 2004."— Presentation transcript:

1 Corritore, MCIT Working Connections, June Overview of Website Design Dr. Cindy Corritore Creighton University ITM 734 Fall 2004

2 Corritore, MCIT Working Connections, June What’s important? Consistency – –Can change high view but not the details Automatic behavior

3 Corritore, MCIT Working Connections, June 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

4 Corritore, MCIT Working Connections, June five design principles clarity consistency contrast [no] clutter cinematic storytelling

5 Corritore, MCIT Working Connections, June 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

6 Corritore, MCIT Working Connections, June 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.

7 Corritore, MCIT Working Connections, June 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

8 Corritore, MCIT Working Connections, June [no] clutter overwhelms the user steals attention feature what is truly important –distill text to essentials and provide elaboration as a link

9 Corritore, MCIT Working Connections, June 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

10 Corritore, MCIT Working Connections, June other design concepts color and fonts navigation grouping feedback graphics presentation general tips

11 Corritore, MCIT Working Connections, June 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.

12 Corritore, MCIT Working Connections, June 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)

13 Corritore, MCIT Working Connections, June 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

14 Corritore, MCIT Working Connections, June 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)

15 Corritore, MCIT Working Connections, June 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

16 Corritore, MCIT Working Connections, June 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

17 Corritore, MCIT Working Connections, June 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

18 Corritore, MCIT Working Connections, June 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

19 Corritore, MCIT Working Connections, June 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)

20 Corritore, MCIT Working Connections, June 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)

21 Corritore, MCIT Working Connections, June graphics does it significantly aid in communication? consider bandwidth technology changes and plug-in’s animation –avoid it unless it is crucial (attention)

22 Corritore, MCIT Working Connections, June presentation how the information represented/presented to the user –voice –text –graphics

23 Corritore, MCIT Working Connections, June 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

24 Corritore, MCIT Working Connections, June 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

25 Corritore, MCIT Working Connections, June 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.

26 Corritore, MCIT Working Connections, June 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-

27 Corritore, MCIT Working Connections, June Examples Sun project Looking GlassLooking Glass Denim wnload/ - download for next week and play with it (for prototyping ideas) wnload/

28 Corritore, MCIT Working Connections, June readings Mountford – –message? –two rules

29 Corritore, MCIT Working Connections, June readings Ivory & Hearst –classes of features they measure ppt about eachppt class Page Formatting Page Performance Site Archi- tecture Text Element s Link Element s Graphic Element s Text Formatting Link Formatting Graphic Formatting

30 Corritore, MCIT Working Connections, June 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?


Download ppt "Corritore, MCIT Working Connections, June 2004 1 Overview of Website Design Dr. Cindy Corritore Creighton University ITM 734 Fall 2004."

Similar presentations


Ads by Google