VO 5 – Design Part II

Inwieweit funktioniert das Modell der „klassischen Softwareentwicklung“ in der Praxis? Kann Software wirklich nach dem Wasserfallmodell (Pflichtenheft -> Spezifikation -> Grobentwurf -> Feinentwurf -> Implementierung -> Test -> Revision) entwickelt werden?

Design ist ein Prozess, bei dem selbst neue Probleme entstehen – dieser steht also im direkten Widerspruch mit obigem Lehrbuchdenken. Viel mehr könnte Softwareentwicklung als Kreislauf gesehen werden, bei dem nach der Analyse wiederkehrende Stationen (Design -> Implementierung -> Test -> Evaluation -> Design) auftreten. Jedoch muss auch hier eine erfolgte Implementierung nicht sofort in die Testphase führen, wenn grundlegende Versäumnisse im Designprozess passiert sind.

Ein weiteres Alternativmodell sieht die Lösung eines Problems in einer unauflöslichen Verbindung aus Analyse, Synthese und Evaluation. Verglichen mit einem Bauprojekt in der Architektur sind in einer idealen (was ist das eigentlich?) SWE zu Beginn Designer zuständig (unter Beisein der Programmierer/Entwickler), dann wird implementiert (immer noch unter den Argusaugen der Designer) – Damit wird erst dann begonnen, wenn der als Konzept bereits ein gut durchdachtes Design zugrunde liegt. Zu allem Überdruss ist jedoch auch Design nicht hundertprozentig „testbar“, oft zeigen sich erst in Verwendung Lücken und Mängel.

Primary Generators sind fixe Paradigmen, die jedes Individuum (egal in welcher Branche) hat. Fällt ein Stichwort für eine zu entwickelnde Software, oder allgemeiner, für ein zu lösendes Problem, schleichen sich sofort gewisse Vorstellungen von der Realisierung ein. Das ist an sich nicht unbedingt etwas schlechtes, jedoch verleiten diese Guidelines dazu, das Problem-lösen mit Scheuklappen und Tunnelblick anzugehen. „kill your darlings“ ist ein Ausspruch aus der Spieleentwicklung – welcher besagt, dass es besser ist, seine Prizipien immer wieder zu überdenken und infrage zu stellen – im Dienste eines besseren Produkts.

Apple Produktbestellung

Auf Apples Website kann man sich einen eigens konfigurierten Rechner zusammenstellen lassen – ganz nach seinen persönlichen Vorstellungen. An sich ist das nichts besonderes, zumal es eine Reihe anderer (kleinerer) Anbieter gibt, die ihren Kunden ein ähnliches Service bieten.

Im speziellen ist es allerdings die dynamische Aufbereitung dieses Bestellvorgangs. Apple hat hier kein Dropdown-Menu für die Komponentenauswahl herangezogen (würde bei wenigen Optionen auch keinen Sinn machen), sondern Radiobuttons. Ein Bild der jeweiligen Komponente links neben dem Text ermöglicht es den Usern, sehr schnell zu gewissen Produkten zu scrollen, ohne sich durch ein Text-Wirrwarr mit dubiosen Festplatten-Seriennummern schlagen zu müssen.

Preisaddition und -subtraktion

Besonders gut hat mir die (einfache) Implementierung des Preis – Additions- und Subtraktionsvorganges gefallen. Wähle ich Festplatte A mit 120 GB, steigt mein Preis natürlich an. Gleichzeitig wird mir jedoch angezeigt, um wieviel billiger ich Festplatte B erstehen könnte, wieviel Geld ich als Käufer also spare.

Sobald ich eine Option anwähle, werden die anderen daran angepasst.
Dieses relative Referenzmodell (es wird bei jedem Produkt nur angegeben, wieviel mehr oder weniger es kostet) erweist sich in dieser speziellen Situation als sehr praktisch.

Myspace.com

Myspace.com ist mit derzeit mehr als 130 Mio. Usern zur größten Online-Blog-Community der Welt avanciert – Tendenz: steigend.

Index von Myspace

Das ist die Startseite, den man zu sehen bekommt, wenn man Myspace.com aufruft. Keine auf Anhieb erkennbare Struktur, nur ein paar Table-förmige Einträge („Cool New People“, „Cool New Videos“) findet man hier vor. Viel zu viele Schriftarten und -größen bestimmen das Schriftbild; langweilige Farben und Unübersichtlichkeit lassen Zweifel am ästhetischen Erscheinungsbild der Seite aufkommen.

Warum dann so erfolgreich?

Sofort drängt sich die Frage auf: „Wie kann eine Seite, die so aussieht, täglich soviele neue User anziehenen?“. Myspace ist eine Online Community, die im Gegensatz zu anderen Communities viel mehr auf das Networking-Prinzip setzt. Adde ich eine Person zu meiner Friends List, erscheine ich gleich dort in seiner/ihrer Buddy-List. Ich wiederum werde nun von anderen Usern gefunden, geaddet, usw.

„______ is in your extended Network“ – Der Myspace – Slogan

So ist man in Windeseile in des anderen „extended network“. Myspace hat somit einen sehr hohen emotionalen Wert bei den Usern, man ist schnell unter Menschen.

Gerade für Musiker oder Musik-Konsumenten birgt die Sub-Plattform Myspace-Music ungeahntes Potenzial. Nahezu jeder namhafte Interpret, engagierter Newcomer und Vertreter der Undergroundszene ist vertreten. Songs können gestreamt und online gestellt werden, schnell ist der Kontakt mit potenziellen Fans hergestellt.

Funktionalität

Sobald man registrierter Benutzer bei Myspace ist, steht man nun vor der Frage, wie man sein Profil nun an seine eigenen Vorstellungen anpassen kann, ist doch das Standard-Layout (blau/weiss) nicht jedermanns Sache.

Ganz im Gegensatz zu anderen Blog-Communities, auf denen man nur aus einer bestimmten Anzahl aus Funktionen / Layouts wählen kann, wird einem bei Myspace vollkommen freie Hand gelassen.

Das hat natürlich Vorteile. So kann man das Aussehen ebendieser persönlichen Seite (mit viel Ausdauer und Kenntnis der Materie) ohne Einschränkung an seine eigenen Wünsche anpassen und trotzdem vom gesamten Umfang der Community profitieren.

Das zentrale Design- und Usability Defizit von Myspace ist jedoch, wie man sein Profil editiert. Mittels HTML-Code und CSS nämlich, die man als Textfetzen an einer völlig unintuitiv gewählten Stelle in den Profilsettings einfügt (unter „Edit Profile > About Me > Bio“).

Das völlig veraltete Layout von Myspace basiert noch auf Tabellen, die in weiteren Tabellen verschachtelt sind. Diese Table-tags beschreibt man als User nun per CSS. Allerdings muss man hierfür erst lange im Internet recherchieren, welche Elemente an welcher Stelle im Layout stehen (Namen wie „.whitetext12, .lightbluetext8, .orangetext15″ sprechen NICHT für sich selbst), wenn man nicht eines der zahlreichen Chaos-Code-Layout Tools verwenden will.

Eingefügtes HTML und CSS in Myspace

Wer schon einmal HTML Code editiert hat, dem stößt obiges Bild sauer auf. Fernab jeglicher Übersicht schlägt man sich im Code-Wirrwarr herum, man kann die Tags ja nicht umbenennen.

Menschen, die mit HTML/CSS und Design generell nichts am Hut haben, können dem Browsing-Spass aufgrund der uneingeschränkten Möglichkeit Code-Schnipsel einzubauen ein jähes Ende bereiten. So ist es nicht weiter verwunderlich, das aufgrund mangelnder Kompetenz solche „Designs“ herauskommen:

Myspace-Alltag: Viel mehr schlechte als gute Layouts

Lösungsansätze

Ein simpler Lösungsansatz wäre eine Umbennung der Tags in sprechendere Namen wie z.B: „Contact_Table“ für die Tabelle, die die Kontakt-Buttons enthält. Ein Myspace-interner HTML-Editor, bei dem vor allem Anfänger nicht viel falsch machen können, wäre ebenso eine Möglichkeit.

Über kurz oder lang muss sich Myspace.com vielmehr an HTML und CSS Standards der W3 orientieren. Tabellen sind im Webdesign schon lange nicht mehr die optimale Lösung zum Erstellen von Layouts, viel besser wäre es, vermehrt auf DIVs und CSS zu setzen. Natürlich ist man, wenn man sich an Standards hält, viel eingeschränkter, als wenn man dies nicht tun würde. Im Endeffekt ist ein strukturierteres, übersichtlichers, leicher und logischer zu bedienendes Myspace im Sinne aller Nutzer/innen.

Link:
Myspace

VO 4 – Design

Design – einer dieser Begriffe, deren Bedeutung auf den ersten Blick klar zu sein scheint. Trotzdem ist es sehr schwierig, eine hinreichende Definition für dieses Wort zu finden – zu allumfassend, zu groß ist dieses Gebiet.

Gerade im Softwarebereich können miese Verkaufszahlen, vernichtendes User-Feedback oder Programmier-Mängel Ausprägungen von schlechtem Design darstellen. Paradigmen wie „Usability vs. Design“ oder „Funktionalität vs. Aussehen/Ästhetik“ führen nicht zum Ziel einer guten Anwendung. Vielmehr stehen beide Aspekte nicht im Gegensatz zu-, sondern in Symbiose miteinander (siehe Apple’s ipod, dessen gute Benutzbarkeit auf seinem Design basiert).

Guiding principles können Software-entwickler davon abhalten, gute Software zu machen. Oft wird zuviel Wert auf einen strengen, Leitbild-orientierten Ablauf in der Entwicklung gelegt – z.B: zuerst einige Erfahrungswerte der Leute, die die künftige Software benutzen werden, einholen, dann in das Kämmerchen einsperren und die Software „runterprogrammieren“. Das wäre ein Prozess, der, bei geänderten Bedingungen / Anforderungen oder aufbauend auf falschen Erhebungen (Leute arbeiten anders, wenn man ihnen dabei zusieht) in der Praxis nicht funktionieren könnte.

Design steht im Gegensatz zum klassischen Problemlösen (z.B. Kreuzworträtsel, bei dem ich nach dem letzten eingesetzten Wort einer Musterlösung entsprechen kann). Es ist vielmehr eine unendliche Weiterentwicklung – gerade in der Informatik recht gut an SW-Versionen zu erkennen – bei der immer wieder neue Probleme auftreten, die gelöst/umgangen werden wollen.

Paradigmen des Designs

Ein Betriebswirt sieht in einem unrentablen Lokal (in der VO das Bsp. mit dem Speisewagen) eine andere Ursache als ein Eventmanager. Die Sichtweise ist ausschlaggebend. Deswegen ist der Designprozeß immer subjektiv, zumal Design als Eigenschaft Geschmackssache ist.

Das Ergebnis des Designens kann nie perfekt sein, da erstens keine „Musterlösung“ vorliegt, zweitens verschiedene Lösungen nicht miteinander vergleichbar sind. Entscheidungen über Designfragen bauen immer auf persönlichen Vorlieben auf.

Nicht immer muss eine Lösung der ursprünglichen Anforderung entsprechen. Ein gutes Beispiel hierfür ist das Opera House in der australischen Stadt Sydney. Jørn Utzons Entwurf brach mit sämtlichen Ausschreibungskritierien, verletzte grundlegende guidelines wie Kosten und Bauzeit. Sein bahnbrechendes statisches Konzept und das Aussehen des Opernhauses konnten die Jury jedoch im Endeffekt überzeugen – er gewann den Wettbewerb. Australien hätte ohne diesen „nicht entsprechenden“ Entwurf wohl ein attraktives Wahrzeichen weniger und wäre kulturell uninteressanter.

Außerordentlich gute Design-Konzepte können in allen Bereichen (Software, Grafik, Architektur,…) Emotionen/Wohlwollen/Gefallen bei den Usern/Betrachtern/Besuchern auslösen, was das Produkt nicht nur für sich selbst, sondern vielmehr auch für die Allgemeinheit zu einem Erfolg macht.

Processing

Processing ist eine Open Source Programmiersprache, die besonders von Künstlern, Designern und Architekten für Image- und Soundprocessing / -prototyping genutzt wird.

Immerhin spricht die Programmiersprache Processing eher Leute an, die Code für künstlerische (visueller oder auditiver Natur) Zwecke verwenden. Somit ist die Zielgruppe relativ klar definiert. Dementsprechend gestaltet ist auch der gleichnamige Editor, der mit dem Download der Processing-Library automatisch installiert wird.

Die Farbauswahl beschränkt sich auf dezente Grau-, Graubraun- und Beigetöne. Das Syntax-Highlighting gliedert sich vielleicht etwas zu unauffällig in dieses Farbschema ein – so sind vor allem auf Laptop- oder TFT-Screens rote und braune Schrift nur schwer zu unterscheiden. Trotzdem wirkt hier alles wie aus einem Guss.

Processing-Editor

Sechs Symbole sind in der oberen Leiste zu sehen. Die ersten beiden sind „Run“ und „Stop“ zum Auführen bzw. zum Beenden des Codes / Programms. Sie sind optisch durch einen Abstand getrennt von den anderen vier Symbolen – „New“, „Open“, „Save“ und „Export“.
Sie alle könnten auch als Menüpunkte in „File“- (MacOS) oder „Datei“- (Windows) Menü abgelegt sein. Rollover Images geben dem User Feedback und zeigen die Funktion an.

Rollover-Images

Wenn man Code markiert, wird dieser in grellem Orange gehighlighted. Diese Farbe zieht sich konsistent durch das ganze Programm, denn sobald man Text markiert, einen Button mit dem Mauszeiger anklickt oder einen Titel für einen neuen Tab eingibt, sprich mit dem Editor-Interface interagiert, ist Orange die Feedback-Farbe.

Ebenso wie das Speichern eines Files. Der Dialog wird direkt im Programm eingeblendet – orange hinterlegt – kommt also ohne Popup-Window aus.

Orange – Highlighting

Ein schwarzer Bereich im Fenster – zum Anzeigen von Kompilierfehlern und dergleichen – rundet den stimmigen Gesamteindruck noch ab: Ein einfacher Editor, leicht zu Handhaben, der allein wegen seines Look&Feel sehr gut zu der Programmiersprache Processing und seinen Verwendungszwecken passt.

Weiterführende Links:
Offizielle Processing-Website
Download Processing

Keyboards – Pitch Bend

Diesmal was ganz anderes. Keyboards (Instrumente, nicht Computertastaturen) oder Synthesizer, wie wir sie heute in ihrer Erscheinung kennen, existieren seit den späten 70ern. Robert Moog, der Erfinder des „Minimoog“ war der erste, der einen tragbaren monophonen Synthesizer baute und erfolgreich verkaufte.

Minimoog

User Interface Design bei Keyboards?

Auch Musikinstrumente wie Keyboards und Hardware-Synthesizer müssen auf den Anwender, sprich den Musiker, zugeschnitten sein, er/sie muss damit ja täglich arbeiten. Bedienungsanleitungen sind hier unerlässlich, da das Interface nicht rein auf Symbolen und Mapping aufbauen kann. Dafür ist das Instrument mit all seinen Anwendungsmöglichkeiten viel zu komplex.

Das Feedback über getroffene Änderungen (z.B Chorus-Effekt) gibt der Ton, der erzeugt wird, selbst. Im Falle von heute üblichen digitalen Keyboards werden Einstellungen zusätzlich als Nummern per LCD-Screen oder Leuchtdioden übermittelt.

Fallbeispiel: Das Pitch-Bend

„Pitch“ bezeichnet in der DJ-Szene die Geschwindigkeit, mit der eine Platte gedreht wird (in rpm – rounds per minute). Der DJ kann die rpm-Anzahl per Pitchregler manuell einstellen.

In diesem Fall meine ich jedoch die Tonhöhenverstellung per Handrand, das bei sämtlichen (guten) Keyboards zu finden ist. Früher bewegte man sich im Halbtonbereich, heute sind bereits wesentlich größere Intervallsprünge möglich. Schon bei Robert Moogs Modell war ein Handrad integriert (auf dem Bild des Minimoogs eines der beiden vertikalen Schiebereglern), was sich dann in der Branche und bei späteren digitalen Modellen als Standard durchgesetzt hat.

Pitchbend beim KAWAI K4

Das Pitch-Bend ist eine geniale wie einfache Erfindung, sind damit doch eine Vielzahl von Möglichkeiten gegeben, experimentelle Musik zu machen und Sounds zu kreieren. Der Musiker greift hier direkt in das Gespielte ein, er manipuliert bei einem MIDI-fähigen Keyboard (modifiziert) die Attribute der Noten (Tonhöhe) – die auch nichts anderes als Daten sind – direkt. Hier liegt auch der Zusammenhang mit der Informatik.

Pitch Bends lassen sich nur mit Widerstand betätigen. Im Inneren ist eine kleine Feder eingebaut, die das Handrad wieder in die Ausgangsposition zurückgleiten lässt. So lässt sich die Tonmodifikation auch haptisch gut wahrnehmen.

Soundbeispiel

Ich arbeite leider noch mit einem Uralt-KAWAI K4 Masterkeyboard aus den Achtzigern, das auch sinnbildlich für den damaligen Sound steht. So hört sich (sehr langsames) Pitch Bend überhaupt an.

KAWAI K4 – Pitch Bend anhören

VO 3 – psychologie und physiologie

Wir versuchen, sämtlichen Sachen / Ereignissen, die wir um uns herum durch unsere Sinne wahrnehmen können, Bedeutung zuzuordnen. Ist deren Sinn für uns nicht nachvollziehbar, braucht es einer immens großen Anstrengung unseres Gehirns, das Gesehene und Gehörte zu verarbeiten.

Sehen

Gerade in der Optik wurde die These, dass unser Gehirn dem Gesehenen oft Interpretiertes beimengt, anhand von zahlreichen Studien über optische Phänomene (oder „Täuschungen“) belegt. Eine gutes Beispiel hierfür ist das Spanish Castle.

Hören

Vertraute Töne, denen wir sofort eine Bedeutung zuweisen können sind unumgänglich für gutes Sound-Design. Eine Kuh, die bellt, macht für Menschen keinen Sinn. Genausowenig wie ein Kopierer, der nach dem erfolgreichen Beenden des Kopierauftrags ein viel zu lautes, schrilles Geräusch aussendet, mit dem wir eigentlich Negatives verbinden.

Bild/Ton – Synthese

Gute Filme leben von der Synthese aus Bild und Ton. Horrorfilme bringen uns zum Schaudern, wenn sie an der richtigen Stelle die passende Sounduntermalung bieten. In der Werbebranche sind Signatures und Jingles das, was dem Slogan (und somit dem beworbenen Produkt) den letzten Schliff verleiht, es zu einem Erfolg macht oder zu einem Flop verkommen lässt.

Emotionen im User Interface Design

Emotionen sind ein zentraler Bestandteil unseres Handelns. Wissen gewisse Features von Applikationen zu gefallen – und seien es „nur“ Spielereien – bauen wir eine emotionale Bindung damit auf und fangen an, mit dem Produkt Positives zu assoziieren. Etwaige Schwachstellen werden ausgeblendet oder hingenommen.

Laut McGurk, (Entdecker des McGurk-Effekts) können einzelne Wahrnehmungskanäle nicht voneinander getrennt werden. Somit muss jeder Designer das Augenmerk immer auf die ganzheitliche Gestaltung des Produkts legen. Bei Software ist diese eine Kombination auf visueller und auditiver; bei mechanischen, angreifbaren Interfaces zusätzlich auf haptischer Ebene.

Laut Donald Norman, einem renommierten Usability-Experten, gibt es drei Ebenen von Interaktion:

„Visceral„, die Genussebene, das subjektive Empfinden.
„Behavioural„, Antrainiertes, Elerntes.
„Reflective„, das Auseinandersetzen.

Arbeiten wir mit einer neuen Applikation oder versuchen ein Gerät zu bedienen, beziehen wir uns oft auf bereits ausprobierte oder angelernte Modelle – zum Beispiel beim Autofahren: Blinker nach oben oder unten drücken, wenn ich rechts abbiegen will?
Durch Mapping, dem bewussten Abbilden realer Zustände („References“) kann man dem Rätselraten vorbeugen, das Benutzen erleichtern. Gutes Mapping braucht keine langen Beschreibungen, denn es nutzt die menschliche Fähigkeit zu assoziieren.

Je mehr man sieht, desto weniger muss man auf oft fehlerhafte mentale Modelle zurückgreifen. Hier beginnt das Konzept der Direkten Manipulation, dem Herumprobieren in einem gegebenen Szenario, die mit durchdachtem Feedback (einer direkten „Antwort“ auf meine Handlung) ein Grundrezept für gutes ui-Design darstellt.

Youtube: Ineligible

Fehlermeldungen sind dann schlimm, wenn man als User nachher noch ratloser als vorher ist. So auch bei YouTube.com. Nach dem Ausfüllen des Registrierungsformulars bot sich mir folgende Fehlermeldung:

„Sorry. Based on the information you have submitted to us, you are ineligible to register for YouTube.com“

Nicht einmal ein Error-Template wird angezeigt, stattdessen ein weißer Screen mit ebendiesem Satz. Youtube entschuldigt sich zwar höflich ( „Sorry.“ ), hat die Registrierungsdaten anscheinend auch erhalten ( „Based on the information you have submitted to us …“ ) und das Wort „ineligible“ bedeutet – laut Wörterbuch – folgendes:

ineligible, adj.

unqualified, unsuitable, unacceptable, undesirable, inappropriate, unworthy; ruled out, disqualified, disentitled

Selbst nach mehrmaligem Wiederholen des Registrierungsvorgangs bot sich mir immer wieder dasselbe Schauspiel, ich sei laut der ärgerlichen – und sehr direkten – Fehlermeldung „unqualifiziert“, „unpassend“, „inakzeptabel“, ja sogar „unwert“ mich bei Youtube zu registrieren.

Im Idealfall besucht man als User eine andere, ebenso große Video-Online-Community. In diesem Fall habe ich als User einen anderen Browser geöffnet und die Registrierung wiederholt. Mit Erfolg.

Aus Mangel an wirklich guten Alternativen (kann mich mit Google Video nicht anfreunden) ist man oft an diese eine Applikation angewiesen. Und steht dann in speziellen Fällen mit einem weißen Screen, ohne Layout und einer „unqualifiziert“, „unpassend“, „inakzeptabel“, ja sogar „unwert“ formulierten Fehlermeldung da.

Digital Web Magazine

Das Digital Web Magazine ist ein Non-Profit-Web-Magazin, das sich an professionelle Webdesigner und -entwickler richtet.

Für das Magazin schreiben hauptsächlich Webautoren und Designer, deren Artikel dann auf der Homepage veröffentlich werden.

Die Macher des DWM haben auf ein einfaches, übersichtliches Layout gesetzt, das das Lesen der Artikel erleichtert. Wenig Werbung, dezente Farben und klare Linien bestimmen das Erscheinungsbild.

Was mir bei dieser Internetseite besonders positiv aufgefallen ist, ist die Sortierfunktion, durch die sämtliche Artikel aus dem Archiv nach gewissen Kriterien geordnet werden. Weder ein dropdown-menu noch eine excelhafte Zeilen/Spalten-Aufteilung finden sich hier.

Die Suchkriterien (Artikel nach „topic“, „date“, „author“, „title“, „type“ sortieren) wurden als Menüpunkte direkt in die Navigation eingebettet. So kann man die Texte besonders einfach auffinden, ohne vorher eine Suchmaske zu Gesicht zu bekommen.
Im Hauptfenster werden die Links zu den Artikeln dann nicht einfach nacheinander angeordnet, sondern zusätzlich gleich gruppiert und mit Kategorie-Bezeichnungen versehen. Das steigert die Effizienz bei der Artikelrecherche.

Video – „Artikel Sortieren“