Web Page Design

1
Web Page Design

• Focus on Usability

2
Internationalization

• Do not use acronyms and abbreviations-
  difficult/confusing to translate
• Adhere to local formats for date, time, money,
  measurements, addresses, and telephone numbers.
• Be particularly careful with images such as
• religious symbols (crosses and stars)
• the human body
• hand gestures
• flags

3
Translation Expansion Requirements (1)

• Besturingselement (Dutch)
• Olvadaci prvek (Czech)
• Ohjausobjekti (Finnish)
• Steuerelement (German)
• Control (English)
• English is very concise- allow additional screen
  space for translation.

4
Translation Expansion Requirements (2)
5
Mystery Meat Navigation

• Having to mouse over icons to see what they
  correspond to
• Goes against the fundamental purposes of a
  website discussed earlier.

http// www.fixingyourwebsite.com/mysterymeat.html
6
Web Page Guidelines (1 of 2)

• Strike a balance between
• Textual information
• Graphics
• Links
• Avoid horizontal scrolling
• Place critical or important information at the
  very top so it is always viewable when the page
  is opened.

7
Web Page Guidelines (2 of 2)

• Use frames with caution.
• Dont break links. Users will bookmark the page
  that interests them and not necessarily take the
  path you create. (search engines)
• Provide sufficient white space (minimum 30)
• Anticipate page breaks

8
Home Page Guidelines

• Limit to one screen
• Clearly identify the Web sites content and
  purpose
• Elements to include
• Site overview or map
• Navigation links to most (if not all) of the site
  or major sections
• Some useful content

9
Further Research

• When to open new browser windows, and when to
  display new content in current browser window?
• Literature has not yet adequately answered this
  question.
• Difficult question to answer, highly dependent on
  the type of user, and the task involved.

10
UI Examples

• Real world user interface examples

11
Giving the user choices is good?

• This issue may be important to a programmer but
  the user doesnt care.
• Every time you provide an option youre asking
  the user to make a decision.
• Dont force the user to make decisions about
  things they dont care about.

• Why is this dialog a wizard?

Adapted from User Interface Design for
Programmers, J. Spolsky, 2001
12
Icon Design
Example from Highway Safety, percent of licensed
drivers who can explain the meaning of each sign.
From Smiley Bahar, The Science of Highway
Safety, Durham, March 2002
13
Wheres Waldo?
http//www.iarchitect.com/mshame.htm
14
Error Message
The message is entirely unhelpful, gives no
indication of what the error is, what to do to
solve it, or even the location of an error log if
one existed.
http//www.iarchitect.com/mshame.htm
15
More Error Messages
16
Requests for Proposals

• User Interface Requirements

17
User Interface Requirements (1)
Free Text to Use in Your Request for Proposals
(RFPs)

• 1. The software should be usable without reading
  a printed guide. If the complexity of the tasks
  being automated cannot feasibly be embedded into
  the software interface, reading a printed guide
  may be unavoidable. In this case, the most that
  any individual user should have to read for a
  particular role is 50 pages-short enough to read
  in one sitting.

http// www.usabilityinstitute.com/articles/RFPInt
erfaceRequirements.htm
18
User Interface Requirements (2)

• 2. Users should be able to accomplish every task
  and entry with the fewest possible keystrokes.
  For instance, dates should not necessitate typing
  four digits for the year unless the context of
  the given field leaves considerable doubt as to
  which millennium might be intended. In many
  cases, keying in any characters at all for the
  year may be an unnecessary expense of the users'
  time.

19
User Interface Requirements (3)

• 3. The interface should enable all interaction
  techniques and input to be discoverable and
  chosen from a browse-able, hierarchical
  structure, arranged in order of the functions the
  user needs to perform.
• Usually, this requirement is being satisfied by
  multiple graphical choices, in the form of icons
  and segmented, click-able graphics known by
  various names, such as imagemaps.

20
User Interface Requirements (4)

• 4. The software should enable users to do things
  out of order without being penalized.
• 5. The software should enable users to make
  outright mistakes without being terminated,
  executed, canceled, re-booted, or erased.
• 6. The system should save all of what the users
  type, by default, meaning without extra steps.
• 7. Users should be forewarned when any work is
  over-written, undone, or erased.
• 8. The interface and messages should make it
  clear why the program does what it does.