Transcript Slide 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
Page Layout Guidelines
• Compare:
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
• Don’t get too close to the edges of the browser window
• Avoid major headings in all capitals - they are hard to
read
• Don’t 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
Page Layout Guidelines
• Don’t mix too many fonts – two should be
enough
• Keep the traditional blue underline for links
• Don’t underline text unless it is a clickable link
• Don’t use complicated background images
• Don’t 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
• Don’t require the user to have a plug-in
Page Layout Guidelines
• Keep multi-media file sizes to a minimum. Don’t
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
• Don’t create images that look like buttons as this
will confuse navigation
• Don’t compromise readability for visual impact
black on white is still the best
• Don’t make the user scroll sideways. To be
absolutely safe design for a 600 pixel width
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
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.
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
unikid>kb>parent2parent
– Use a site structure map
– Provide a good site search facility
• It is essential that the site be consistent
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).
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).
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)
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.
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.
Farbe - emotionale Wirkung
• Rot
dominant, kraftvoll, temperamentvoll
Aktivitä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
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)
Weiterführendes
• Demos zu Gestaltgesetzen:
http://www.psych.purdue.edu/~coglab/VisL
ab/demos.html