1. Visual Design Visual Design, Information Architecture
Human Factors and Global Design

2. You (The Designer) direct their (The Audience) eyes
by creating a visual hierarchy
for them to follow.
Dense text documents without contrast and visual relief: uninteresting and harder to read.
Poorly designed or overly bold graphics or typography: distract or repel users.

3. time
Group Contrast

5. Object
Layout
A very typical layout of objects on a page is like the following:

6. <header>
Header
Navigation
<nav>
Spotlight
Object
Layout
Content
<article>
<aside>
Aside
This layout is indeed so common that it is enshrined as tags in HTML 5.
<footer>
Footer

7. Home
1st level
2nd level
If you look at Polygon in the header, for instance, there’s home, the first level (news, reviews, features, …), and if you go into the bucket “news”, on the second level, you find the buckets reports, opinion, culture, ….

8. Common Screen Layouts
Theresa Neil – RIA Screen Layouts

9. Negative Space (white space)

11. Balance

12. Balance
 Unbalanced 

13. Balance
 Balanced 

14. Balance

15. Graphics

16. Example of bad graphics
Example of bad graphics. Way too many images, poor images choices, poor size choices, etc

17. Rule of Thirds

19. Hick’s Law
Every additional choice increases the time required to take a decision

20. Imagine all of Amazon on one page

21. Fitt’s Law The time it takes to take an action is a function of the
distance from the target
and the size of the target.

22. Fitt’s Law (Simply Spoken)
The larger and closer a button is,
the faster the user can decide
to click it.

25. Occam’s Razor The simplest solution is usually best
Slight misquote here…
Actual statement (from Wikipedia):
Among competing hypotheses, the one with the fewest assumptions should be selected. Other, more complicated solutions may ultimately prove correct, but—in the absence of certainty—the fewer assumptions that are made, the better.

27. Usability Don’t make users Think / Keep it Simple
Don’t test user’s patience
Focus users
Strive for interaction exposure
Use effective writing
Use Conventions
Adapted from

28. Keep It Simple
User simple direct navigation to make it simple to navigate the site. User simple intuitive images to explain functionality in obvious ways.

29. User Patience

30. Focus Users

31. Interaction Exposure
 No Button Visibility

32. Effective Writing

33. Use Conventions

34. Global Design
The Web is a global medium, accessible by everyone in the world
Just because we live in the US doesn’t mean the US is our only target audience

35. number/date/time formats images symbols colors flow functionality
Elements to consider: 
text/character set
number/date/time formats
images
symbols
colors
flow
functionality
Designers often translate the first two items only, text and formats, and ignore the rest. Big mistake!

36. Up front:
Plan for global audience
Understand your audience

37. Guidelines Provide space for translation of text
Avoid colloquialisms and slang
Avoid culture-specific icons
Avoid text in icons & graphics
Offer different language versions?
CLASS: What are some slang terms that don’t translate ?
Note that we’re not talking about building your little site in multiple languages (though that would be nice)
The example is for a Japanese figure manufacturer; click the little flag in the top right corner to change languages. What are the advantages and disadvantages of this approach?

38. Are colors codes universal?
How fluent is your interface?: designing for international users
Patricia Russo & Stephen Boor
May 1993
Proceedings of the INTERACT '93 and CHI '93 conference on Human factors in computing systems CHI '93
Publisher: ACM Press

39. Culture-specific Icons
Anything wrong with this?
Why is the Apple “stop” icon unacceptable in Greece?
Not very international either. Apparently in Greece, the hand held palm up (as in the Stop icon) means "here's sh*t in your face". Maybe the Greeks just think Microsoft are being unusually candid for a change.

40. Internationalization
Bilingual requirements for Canada
Currency
US $1,234.00
DM 1.234
Time
US 8:00pm October 24, (8/24/01)
UK 20:00, 24 October 2001
Germ 20:00,
ISO 20:00,
Japan 20:00, or Imperial Heisei 11

41. Other Considerations Flow of information Language Searching
Include language and character set in HTML
Allow more space for text translation
Searching
Meta keywords
Color blindness issues
Color blindness is a major issue!
An estimated 7% of males have some form of color blindness. Any colorblind users in the class?
Note: German uses % more space to say the same thing as English.

42. Some HTML for usability…
<a href=“whatever” target=“_blank”>Click me!</a>
Opens in a new tab/window
<img src=“picture.png” title=“I’m a tool-tip!” />
Yes, we’ve seen this one before.
<a id=“someplace” /> … <a href=“#someplace”>Back to top</a>