Mitglied der Fachhochschule Ostschweiz FHO 1www.fhsg.ch © FHS St.Gallen

So

ftw

are

En

gin

eeri

ng

S

oft

war

e E

ng

inee

rin

g

OOD – Object Oriented Design III

GUI-Design

Mitglied der Fachhochschule Ostschweiz FHO 2www.fhsg.ch © FHS St.Gallen

So

ftw

are

En

gin

eeri

ng

Lernziele

Sie können ...– die Grundsätze des Screen-Designs erläutern– einen GUI-Design vornehmen.

Mitglied der Fachhochschule Ostschweiz FHO 3www.fhsg.ch © FHS St.Gallen

So

ftw

are

En

gin

eeri

ng

Literatur

Applikationen objektorientiert konzipieren:– Kapitel 8.2

Lehrbuch der Objektmodellierung:– LE 9 + LE 10

Mitglied der Fachhochschule Ostschweiz FHO 4www.fhsg.ch © FHS St.Gallen

So

ftw

are

En

gin

eeri

ng

GUI – Graphical User Interface

Mensch-Maschine-Schnittstelle

Look and Feel

Dialoggestaltung– Styleguides – Softwareergonomie

Gesetzliche Vorgaben– Barrierefreiheit (Zugang für Behinderte)– Web Accessibility Initiative (WAI) der W3C

Technik berücksichtigen:– Rich-Client– Thin-Client (mit Browser)

Mitglied der Fachhochschule Ostschweiz FHO 5www.fhsg.ch © FHS St.Gallen

So

ftw

are

En

gin

eeri

ng

Software-Ergonomie – ISO 9241

Aufgabenangemessenheit

Selbstschreibungsfähigkeit (Hilfen, Rückmeldungen)

Steuerbarkeit durch den Benutzer

Erwartungskonform (konsistent)

Fehlertolerant

Individualisierbar

Lernförderlich (z.B. Nutzung von Metaphern)

Mitglied der Fachhochschule Ostschweiz FHO 6www.fhsg.ch © FHS St.Gallen

So

ftw

are

En

gin

eeri

ng

Bedienungs-Orientierung

Objektorientiert• Geschäftsobjekte sichtbar• Kontextmenü (Pop-Up-Menü) beim Objekt• Passende Symbolleisten• Doppelklick auf Objekt• Drag and Drop

Funktionsorientiert• Programmaufruf• Öffnen bzw. Suchen der Objekte als Funktion im

Anwendungsprogramm• Zugang über Menü (Drop-Down-Menü) in Menübalken

Mitglied der Fachhochschule Ostschweiz FHO 7www.fhsg.ch © FHS St.Gallen

So

ftw

are

En

gin

eeri

ng

Fensterarten

Anwendungsfenster:– meist nicht modal

• Hauptfenster• Unterfenster

Dialog-, Mitteilungsfenster– meist modal

(d.h. müssen exklusiv bearbeitet und wieder verlassen werden)

Mitglied der Fachhochschule Ostschweiz FHO 8www.fhsg.ch © FHS St.Gallen

So

ftw

are

En

gin

eeri

ng

Style-Guides

Microsoft• Windows XP - Guidelines for Applications

IBM• IBM Common User Access Guidelines, (CUA)

Apple• Macintosh Human Interface Guidelines

SAP• R/3 Style Guide

Open Software Foundation (Osf)• Osf/Motif Style Guide: Revision 1.2 (Osf/Motif Series)

SUN Microsystems• Java Look and Feel Design Guidelines (2nd Edition)

www.procontext.com/de/richtlinien

Mitglied der Fachhochschule Ostschweiz FHO 9www.fhsg.ch © FHS St.Gallen

So

ftw

are

En

gin

eeri

ng

Interaktionselemente

Textfeld (ein-/mehrzeilig)

Drehfelder (spin button)

Optionsfeld (radio button)

Kontrollkästchen (check box)

Listenfeld (list box)

Kombinationsfeld (combo box, dop-down)

Schieberegler (slider)

Schaltflächen (command button)

Register (tab control)

Strukturansicht (tree view control)

Mitglied der Fachhochschule Ostschweiz FHO 10www.fhsg.ch © FHS St.Gallen

So

ftw

are

En

gin

eeri

ng

Farb-Gestaltungsregeln

Farben sparsam einsetzen

Konsistentes Farbdesign

keine grellen Farben, eher Pastelltöne

Auf Farbkontraste achten:– nicht störend– nicht hindernd für Farbenblinde– druckfähig

Farbmetaphere korrekt verwenden:– grün ok, weiter– gelb Achtung, Vorsicht– rot Stopp

Mitglied der Fachhochschule Ostschweiz FHO 11www.fhsg.ch © FHS St.Gallen

So

ftw

are

En

gin

eeri

ng

Bildschirmgestaltungsregeln

Proportionen beachten

Symmetrie einhalten

Sequenz muss logisch sein

Möglichst einfach gestalten

virtuelle Linien minimieren

Mitglied der Fachhochschule Ostschweiz FHO 12www.fhsg.ch © FHS St.Gallen

So

ftw

are

En

gin

eeri

ng

Entwurf der GUI-Schicht

Mitglied der Fachhochschule Ostschweiz FHO 13www.fhsg.ch © FHS St.Gallen

So

ftw

are

En

gin

eeri

ng

Entwicklungstools I

Visueller Editor

Mitglied der Fachhochschule Ostschweiz FHO 14www.fhsg.ch © FHS St.Gallen

So

ftw

are

En

gin

eeri

ng

Entwicklungstools II

Business Intelligence und Reporting Tool

Mitglied der Fachhochschule Ostschweiz FHO 15www.fhsg.ch © FHS St.Gallen

So

ftw

are

En

gin

eeri

ng

Literaturhinweis

Kompendium Screen-Design

Frank Thissen

ISBN 3-540-43552-2

Springer-Verlag

Mitglied der Fachhochschule Ostschweiz FHO 16www.fhsg.ch © FHS St.Gallen

So

ftw

are

En

gin

eeri

ng

Übungen

UML-Übungen• Übung 9

Fallstudie Nutz AG• Auftrag 9