Session 4:
Page Design
J 394 – Perancangan Situs Web
Program Studi Manajemen
Universitas Bina Nusantara
Screen Real Estate
Content of Interest
Navigation
Un-necessary interface elements
BWD
Bina Nusantara University
2
Cross Platform Design
Flexibility & Logo
1. Where are users
coming from?
2. Pixel and Color
Depth
3. Get a Big Screen
4. Resolution
Independent Design
BWD
5. Use text for text
6. Provide Separate
Printable Pages
7. Don’t use nonstandard content
8. Installation Inertia
Bina Nusantara University
3
Response Time
t < .1 second = instantaneous
0.1 < t < 1 sec. = uninterrupted flow through an information space
1 < t < 10 seconds = limit to keep users attention on the dialog
Have Predictable Response Times
Speedy downloads, speedy connections
Users like fast pages
Glimpsing the first screenfull
BWD
Bina Nusantara University
4
Linking
Trailing slashes "/" for directories 
display faster
Link descriptions: 2-4 words long
TITLEs to explain links
Name of site (external), subsite name,
and any warnings (registration required)
Titles should be max. 60-80 characters
BWD
Bina Nusantara University
5
Linking (2)
Coloring your links:
 Nonstandard link colors?? (they contribute to 16% of
task success)
 Use unvisited = blue and visited = purple or red
Link expectations: links are double-ended
 Arrival: situate users in new context, provide them with
value
 Departure: explain why they should leave
 Don't open up new browser windows (it disables the
back button, and they can do it themselves)
BWD
Bina Nusantara University
6
Linking (3)
External links: value added part of your
content + cheap
Incoming links: support them
Permanent URLs
Great focused content
BWD
Bina Nusantara University
7
Linking (4)
Not require subscriptions and registration
Advertising: link directly to payoff page,
not your home page (20-30% hit back
button otherwise)
BWD
Bina Nusantara University
8
Style Sheets
Single Linked Style Sheet
Make sure stylesheets work
 Try disabling and reload
 Use no more than two fonts (possibly a third
for computer code)
 Use relative font size not absolute size
 Don't use "!important" in style sheets
 Use the same CLASS names for the same
concept for multiple stylesheets
BWD
Bina Nusantara University
9
Separating Meaning &
Presentation
No longer predict user’s configuration
– Use stylesheets
– Optimize for different displays+speech
BWD
Bina Nusantara University
10
Others
Frames: Just say no.
Credibility: Good-looking clean design
equals credibility.
Printing: Provide printable versions of
any long documents.
Conclusion: Simplicity is the goal of
page design. Users focus on
content.
BWD
Bina Nusantara University
11