Information Science Student Association

First Meeting: Thursday, 9/10 at 4:45 in Upson 205

Come relax with us and get to know other students on campus interested in Information Science! Pizza and refreshments will be served!

Dont Make Me Think!: C.R.A.P. and Design Principles

INFO 1300: Introductory Web Design and Programming

Dont make me think!

Users are busy and have other things on their minds than your page. Let them focus on doing their task, not understanding your design.

Things that make me think

Unclear point, i.e. why am I at this site?

http://www.hl2.com

Hidden links, aka where can I click?

http://www.northcantonmedical.org/ http://www.augsburg.edu/main.html

Unclear layout and font choices, aka what are they trying to communicate?
http://web-a-dex.com/

No clear visual hierarchy, i.e. how is this stuff organized?

http://www.nacd.org/

Too much information on one page

http://www.arngren.net/

Unreadable text
http://www.drjoye.com/

Too much noise

http://www.evangelcathedral.net/welcome.htm

Pay attention to C.R.A.P.

Contrast Repetition Alignment Proximity

http://www.colorado.edu/AmStudies/lew

Poor Contrast

Using contrast to focus attention

Testing contrast with grayscaling

Repetition
Repeat visual elements throughout each page and your entire site. Use repetition to reinforce your theme and group information.

Flush-left vs. Flush-right

Center alignment is boring and looks amateurish

Whats wrong here?

Multi-plane alignment

Alignment?

Whitespace is your friend

http://1000awesomethings.com/

Subtle use of proximity

Design principles for not making me think

1. Create a clear visual hierarchy

Make page structure clear at a glance

How to create a clear visual hierarchy

1. Make most important things most prominent. 2. Visually relate things that are logically related. 3. Nest things visually to show whats a part of what.

How would you redo

2. Take advantage of conventions.

3. Break pages up into clearly defined areas

4. Make it obvious whats clickable

Dont make readers guess what to click

http://www.moma.org/exhibitions/2001/worksph

6. Make Navigation Easy