Web User Interface Design

1
Web User Interface Design

• Requires special graphic design skills
• Basic knowledge of design principles is
  invaluable for any developer
• Three options for projects
• Include an experienced web graphic designer as
  part of the development team
• Train a traditional developer in graphic design
• Buy a web site template off the shelf

2
Page Layout Guidelines

• Compare

3
Page Layout Guidelines(loosely collected from
Vidgen et al., 2002)

• Use one alignment the mix of centered text and
  left justified text is messy
• Centered text requires more advanced graphic
  design expertise to pull it off
• Tables are an essential layout device. The layout
  of the right side of the figure is controlled
  with a table whose borders have been turned off
• Dont get too close to the edges of the browser
  window
• Avoid major headings in all capitals - they are
  hard to read
• Dont italicize words in capitals
• Create a focal point if all of the text is in
  the same font size then it is hard to see what is
  important

4
Page Layout Guidelines

• Dont mix too many fonts two should be enough
• Keep the traditional blue underline for links
• Dont underline text unless it is a clickable
  link
• Dont use complicated background images
• Dont use animations. Animated images can be
  amusing first time but they tire quickly and then
  become intensely annoying. If you must have an
  animation, set it to run once and then turn off
• Dont require the user to have a plug-in

5
Page Layout Guidelines

• Keep multi-media file sizes to a minimum. Dont
  use photos unless they add value
• Think about providing thumbnails to speed up page
  loading time
• Open links in the current window rather than a
  new one
• Dont create images that look like buttons as
  this will confuse navigation
• Dont compromise readability for visual impact
  black on white is still the best
• Dont make the user scroll sideways. To be
  absolutely safe design for a 600 pixel width

6
Page Layout Guidelines

• Scrolling vertically is acceptable
• A clean serif face is most readable for large
  amounts of text, such as Times Roman. Sans serif
  fonts create a pleasing image for headings and
  diagrams
• Think about providing printer-friendly versions
  of web pages! Reading text from the screen is
  significantly more tiring and less efficient than
  reading from a paper version.
• Check the site regularly for dead links

7
Navigation Schemes

• Navigation and content are inseparable the
  navigation scheme schould reflect the style and
  aims of the site.
• Hierarchical structure
• Narrow and deep slow, saves screen space
• Broad and shallow fast, but needs space
• Rules of thumb
• every piece of information should be accessible
  within three clicks.
• Navigation should account for less than 20 of
  the potential content space.
• Deep linking is allowed, such that users can
  access a detailed page directly.

8
Navigation Schemes

• Key aim of navigation is to enable users to know
• Where am I?
• Where have I been?
• Where can I go?
• useful devices
• display a location on each page, such as
  unikidgtkbgtparent2parent
• Use a site structure map
• Provide a good site search facility
• It is essential that the site be consistent

9
Experiment zum Lesen vom Bildschirm (aus A.
Holzinger, 2001)

• Experiment von NIELSEN (1999) Kontrollgruppe las
  einen Standard-Web-Text einer Tourismusseite in
  Nebraska. Die Versuchsteilnehmer gaben
  anschließend wieder, was sie sich gemerkt hatten.
  Der Output der Gruppe wurde mit 0
  (Kontrollbedingung) festgelegt
• Nebraska is filled with internationally
  recognized attractions that drawer large crowds
  of people every year, without fail. In 1996, some
  of the most popular places were Fort Robinson
  State Park (355,000 visitors), Scotts Bluff
  National Monument (131,166), Arbor Lodge State
  Historical Park Museum (100,000), Carhenge
  (86,598), Stuhr Museum of the Prairie Pioneer
  (60,002), and Buffalo Bill Ranch State Historical
  Park (28,446).

10
Experiment zum Lesen vom Bildschirm

• Die Verwendung einfacher und kurzer Sätze bringt
  bereits eine Verbesserung von 27 gegenüber der
  Kontrollgruppe
• Nebraska has several atractions. In 1996, some
  of most-visited places were Fort Robinson State
  Park (355,000 visitors), Scotts Bluff National
  Monument (131,166), Arbor Lodge State Historical
  Park Museum (100,000), Carhenge (86,598), Stuhr
  Museum of the Prairie Pioneer (60,002), and
  Buffalo Bill Ranch State Historical Park (28,446).

11
Experiment zum Lesen vom Bildschirm

• Eine Strukturierung des Textes bringt eine
  Verbesserung um 47
• Nebraska is filled with internationally
  recognized attractions that draw large crowds of
  people every year, without fail. In 1996, some of
  the most popular places were
• Fort Robinson State Park (355,000 visitors)
• Scotts Bluff National Monument (131,166)
• Arbor Lodge State Historical Park Museum
  (100,000)
• Carhenge (86,598)
• Stuhr Museum of the Prairie Pioneer (60,002)
• Buffalo Bill Ranch State Historical Park (28,446)

12
Experiment zum Lesen vom Bildschirm

• Die Zusammenfassung (summary) des Textes
  (allerdings unter Kürzung des Informationsgehaltes
  !) bringt eine Verbesserung um 58
• In 1996, six of the best attended attractions in
  Nebraska were Fort Robinson State Park, Scotts
  Bluff National Monument, Arbor Lodge State
  Historical Park Museum, Carhenge, Stuhr Museum
  of the Prairie Pioneer, and Buffalo Bill Ranch
  State Historical Park.
• Eine Kobination aus Zusammenfassung und
  Strukturierung brachte schließlich eine
  Verbesserung um 124 gegenüber der
  Kontrollbedingung.

13
Farbe

• Die Empfindlichkeit der Rezeptoren in der
  Netzhaut für farbiges Licht ist genetisch
  codiert. Das Farbempfinden variiert daher von
  Mensch zu Mensch.
• Auch wenn Farbe die Lernleistung nicht direkt
  erhöht, wird richtig eingesetzte Farbe von
  Benutzern als angenehm und motivierend empfunden.
• Aufgrund der Adaptionsfähigkeit des Auges ist am
  Bildschirm dunkle Schrift auf hellem Grund besser
  Wahrnehmbar.
• Jede Farbe hat eine zugehörige psychologische
  Eigenschaft. Farben können Gefühlsstimmung,
  Temperaturwirkung, zugeordnet werden.

14
Farbe - emotionale Wirkung

• Rot dominant, kraftvoll, temperamentvoll Aktivi
  tät, Kraft, Liebe, Gefahr, Warnung
• Gelb lebendig, zieht Aufmerksamkeit auf
  sich Wärme, Heiterkeit, Hoffnung, Wert
• Grün entspannend, neutral, naturnahe Frische,
  Wachstum, Ruhe
• Blau weit, elegant, zurückhaltend Harmonie,
  Kühle, Intuition, Himmel
• Schwarz vermittelt Eleganz und Würde
• Weiß rein, klar, Farbe der Freude

15
Strategien für das Farbdesign

• Farbkomposition mit Farbtönen unterschiedlicher
  Sättigungsgrade wirkt unausgewogen.
• Farben gezielt einsetzen zu viele Farben die
  Unterschiedliches bedeuten, vermindern die
  Aufnahmefähigkeit.
• Bildschirmmasken Eine einzelne Maske sollte
  nicht mehr als 4 Farben, ein Dialogsystem nicht
  mehr als 7 Farben enthalten
• Auf die Gestaltung großer Flächen mit satten
  Farben soll verzichtet werden.
• Sanfte Farben mit wenig Intensität vermitteln
  Geborgenheit und Bequemlichkeit.
• Ästhetische Harmonie verlangt das Weglassen
  mindestens einer Grundfarbe (Rot, Grün, Blau)

16
Weiterführendes

• Demos zu Gestaltgesetzenhttp//www.psych.purdue.
  edu/coglab/VisLab/demos.html