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 • 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

4. 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

5. 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

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 unikid>kb>parent2parent • 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 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

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 Gestaltgesetzen:http://www.psych.purdue.edu/~coglab/VisLab/demos.html