Designing a website
INP 2008/2009 - Web Design I Most of what you hear may seem self evident.
I But it should be told.
Lennart Herlaar
lennart@[Link] I Most books hardly pay attention to the subject.
[Link] I Every large piece of software should be designed to meet its goals.
room A104, telephone 030-2533921 I Start with deciding what these goals are and document them explicitly.
February 23, 2009 I Information Design.
I Interaction Design.
I Presentation Design.
Web Design 1 Web Design 1
Planning Three views - the technological view
I Construct a planning to obtain the specified goals: I The technological approach:
How can the goals be obtained? the more complex the technology the better
What functionality is required/included? specific knowledge of the internet programmer determines how the site will
What type of media will be used (audio, text, interactive (yes/no),...)? look.
I Example: given the goal of the sponsor to promote conversation between why design at all? Start programming!
people (external or internal) about the sponsor, the following may result: I Example: using Adobe Flash for a simple library.
How? Interactive discussion forum. I Example: a programmer who knows a lot about video will find a way to use it
What functionality is required/included? People can engage in on a website (realtime videos of surgery on a hospital site).
asynchronous discussions organized as threads, and synchronous on-line
chats.
What type of media will be used? Text, on-line conversation.
Web Design 2 Web Design 3
Three views - the organizational view Three views - the user centered view
I The organizational approach: I The user-centered approach: design focused on the future users of the site
website structure reflects the structure of the organization I Structure should reflect the way the intended users think.
full of jargon and specialized knowledge I Example: children are not very verbal, so children sites use pictures a lot
I People who do not know their way around the organization, do not know their I Example: children look at things that move.
way around the website.
I If necessary, lead different groups of users to subsites for different user groups.
I Example: a hospital homepage filled with links to cardiology, otolaryngology,
..... I Example: separate subsites at a university for oncoming students, staff and
current students.
I Example: the internal [Link] website.
I Poor people are usually on low-bandwidth connections: avoid the use of large
images.
I The sponsor pays for the site, but neither you nor, in some cases, they have to
look at the site.
I It is the use of the site by the intended audience that makes a site successful.
Web Design 4 Web Design 5
[Link] — February 23, 2009 — 1
Defining your audience Other questions to ask yourself
I Criteria (demographics except the final two): I What will the intended audience use the site for?
Age (interval) I Why will they use it?
Gender (male,female) I What is the purpose of the sponsor in building the site?
Geographic location (local vs. national vs. global). A site for inhabitants Increase sales
for Utrecht can make assumptions a site for the whole world can not make.
Display items
Residence: rural vs. suburban vs. urban
Communicate a mission statement
Level of income: low to high
Sell ’whatever’
Level and type of education: low to high, academic vs. vocational
Race, nationality, ethnic group I Each of these purposes usually leads to part of the functionality present on the
site.
Interest
History, from what page did the user arrive at your site I Answers to these questions should be explicitly stated in the design
documentation.
I Not all properties need to play a role for every website, but it’s good to get
the intended audience straight.
I Websites about collecting music might for instance cater mainly for males.
Web Design 6 Web Design 7
Goals and objectives Planning the structure
I A goal might be to make the public aware of the existence of a certain news I Flow chart of the various pages that exist and the navigation between them.
paper. I Check that people can easily navigate the site.
I Secondary and tertiary goals may also exist. I Include the site map as a separate page on the site.
I Goals are long term, preferably qualititive (and measurable) I Usually every functionality boils down to a separate part of the site.
I Objectives are means and methods to obtain the goals. forum
I An objective for the news paper might be “to have hourly updates of key news calendar
stories”. faculty and staff
I The effectiveness of a website should be testable. teaching resources
I The first goal might be restated to say: “to enlargen the reader base of the I For each of the site’s pages a description of the functionality available on that
news paper within 3 months by 20 percent”. page should be given in the documentation.
I Example: Teaching resources contains course material in the form of texts,
links to publications (pdf files of material used within courses)... All should be
searchable on topic..... Functionality for adding new items to the site should
be available.
Web Design 8 Web Design 9
Media: text Media: communities
I Make the font sizes on your site scalable and relative: avoid fixed sizes. I Powerful paradigm
I Make sure websites come out well on print, or have pdf versions for download. I Use depends on context
I Avoid scrolling yes or no? I Web 2.0 applications emphasize online collaboration and sharing among users
I Experiments have shown that people hardly use the scrollbar, so Fully web-based
I They should never have to scroll to get to a menu item? Users are owners and in control of data
I Use hyperlinks for quick reference. Participation and democracy
Rich AJAX-based interface
I Black on a white background is best for reading material.
Aspects of social networking
I Use plenty of margins. Public good
I Examples include Wikipedia, Flickr, MySpace, YouTube, Digg, Google Maps
Web Design 10 Web Design 11
[Link] — February 23, 2009 — 2
Media: images Media: other
I For sites with low bandwith users: use clickable thumbnails I Use video, audio and animation only when necessary.
I Always include descriptions of images. I Often depends on some software being installed.
I Images can be used for navigation I Chances are the user can not see the video or animation.
I Clicking on the campus site to get information about various buildings I Example: Flash intro.
I Compress your images. Use jpg for photo’s, png for drawings. I Spoken text can be helpful, but only on demand.
I Backgrounds are nice, but keep them low-profile. I Most animations are only to please the eye, not to convey important
information.
I Avoid playing audio unless the user asks for it.
I Children (and adults) look at what moves: use it to get their attention when
you have to.
I Avoid gimmicks.
Web Design 12 Web Design 13
Interactivity Navigation
I If possible allow the user to modify the site to his own demands (user profile). I Website are extremely non-serial.
I Cookies can be used here for instance. I Let the user know who you are (logos, consistent colouring).
I Google and the like do this. I Let the user know where he is on your site,
I Do not force things on the user: let him choose to do things and let him I even if he arrives at the site directly on a page four levels deep.
decide to stop. I Have a direct link to the base page available.
I Try to get feedback about the site (forms). I Cascading titles are good to have:
I Experience shows that hardly anyone takes the time to fill these in Universiteit Utrecht / Computer Science / Staff / Lennart
I Consider adding community tools. I Have a clickable site map.
I Have a search facility. I When given a list of links (e.g. a list of articles), add Prev/Next links to each
I Forms should have a submit button and a reset. of the pages.
I Don’t use frames for stable parts of the site like menus.
I Generate or include these.
Web Design 14 Web Design 15
Displaying information Displaying more information
I Many psychological rules exist. I On most computers, the screen is more wide than long.
I Keep lists small. I Use the sides for menu columns.
I Keep the colours friendly and don’t use too many. I Use thumbnails to reach larger pictures.
I Take care of contrast: orange on blue does not work well.
I Many choices: how would you layout a calendar?
One long list with a scrollbar?
Organized by weekday (7 columns)?
A monthly calendar with each square having a hyperlink to the events of
that day?
Use week numbers?
Web Design 16 Web Design 17
[Link] — February 23, 2009 — 3
Some font issues Other issues
I Go for 10 to 12 words per line. The remainder (with white space) can be used I People look first in the upper left corner and scan the rest of the page (but...)
for menus and lists on the side. I Paragraphs with indent or empty line (not both).
I Avoid small fonts. I Get inspiration from other websites: use what you like.
I Use relative font sizes. I Line things up nicely. People prefer order.
I Serif (fonts with little feet and caps) were used for reading material. I Scrolling can be a pain: try to avoid users having to do it.
I For instance: Times I Or better, let them choose (lists of cd’s).
I Sans Serif (like the slides here) were used for short phrases. I Variable width prevents horizontal scrolling.
I For instance: Arial and Helvetica. I Be consistent in presentation (CSS).
I Things are changing: Verdana for screen readability. I Usually take the middle road,
I Be consistent about sizes (use CSS). I but sometimes a bit of guts is good to have.
I Don’t go easy on the whitespace.
I AVOID UPPER CASE!!
Web Design 18 Web Design 19
How to design? Copyright issues
I Sketch the webpages (on paper), storyboard I The web is a great place to steal things.
I Have others look at it before you implement. I When you copy something, ask for permission.
I Make a quick prototype: only interface, no functionality. I Copyright need not be registered: if you make something, you have the
I Test in various browsers. copyright.
I Test with various monitors, colour depths and screen sizes. I Unless you transfer it.
I What happens if the fonts of your choice are not available? I Verify that the people who give you the right, have it to give it to you.
I Some standards are not free (the gif expired sometime ago...). Avoid non-free
standards.
I Music on sites...
I Copyright protects the expression of an idea, not the idea itself.
I More legal issues....?
I How about photographs?
Web Design 20 Web Design 21
[Link] — February 23, 2009 — 4