A GUI Best-Practices Example Ableton Live Techtalk von Henning Bergmeyer 20.10.2009
Übersicht <ul><li>Hintergrund: </li></ul><ul><ul><li>GUI-Standards: ISO 9241 </li></ul></ul><ul><ul><li>Echtzeit Klangbear...
Richtlinien der Interaktion zwischen Mensch und Computer ( EN ISO 9241) <ul><li>EN ISO 9241-11 Gebrauchstauglichkeit </li>...
Musik und Klang <ul><li>Musik  ist die organisierte Form von Schallereignissen im von Menschen hörbaren Frequenzband </li>...
Workflow Real-time Sound Editing und Komposition <ul><li>Generierung von Klang, Harmonien   und Rhythmen </li></ul><ul><ul...
Notationen <ul><li>Noten </li></ul><ul><li>Tracker Patterns </li></ul><ul><li>Bars </li></ul>
Einige Features von Ableton Live <ul><li>Bar Pattern Sequencer </li></ul><ul><li>Multi-Tracking  </li></ul><ul><li>Synthes...
First Look on Ableton Live: Layout <ul><li>Dateiverwaltung </li></ul><ul><li>Online-Tutorials </li></ul><ul><li>Browser  <...
Arbeitsumgebung: Studio mit Modularsystem <ul><li>http://trashaudio.blogspot.com/2007/11/workspace-and-environment-captain...
Arbeitsumgebung <ul><li>GUI ist bei vielen Programmen Studiogeräten nachempfunden </li></ul><ul><ul><li>Vorteile </li></ul...
Signal-Routing im Rack per virtueller Kabel in Propellerheads Reason Bild: http://www.musicianslife.de/wp-content/uploads/...
Signal-Routing in Jeskola Buzz / BUZZle
Look & Feel von Ableton Live <ul><li>Einheitliche Darstellung </li></ul><ul><ul><li>Plug-ins bekommen automatisch zusätzli...
Star Trek GUI http://www.lcarsdeveloper.com /
Look & Feel von Ableton Live <ul><li>Kurze Befehlssequenzen </li></ul><ul><ul><li>kompakte Darstellung, z.B. durch Überlag...
Reiche GUI-Funktionen <ul><li>Layout zoom- und scrollbar </li></ul><ul><ul><li>Side-Views </li></ul></ul><ul><ul><li>Main-...
Datenmanagement <ul><li>Live-Browser </li></ul><ul><ul><ul><li>Instrumente </li></ul></ul></ul><ul><ul><ul><li>Midi-Effekt...
Demo der Ableton-Live GUI <ul><li>Look & Feel und Layout </li></ul><ul><li>Integration von Hilfe und Tutorials </li></ul><...
Beispielkonfiguration für viele Aufnahme und Controller-Kanäle
Fazit <ul><li>Ableton Live ist mehr als gebrauchstauglich </li></ul><ul><ul><li>effiziente Handhabung (Ansichten, Wiederve...
Links <ul><li>GUI-Standards </li></ul><ul><ul><li>ISO9241:  http://de.wikipedia.org/wiki/ISO_9241 </li></ul></ul><ul><li>M...
Nächste SlideShare
Wird geladen in …5
×

A GUI Best-Practices Example: Ableton Live

2.167 Aufrufe

Veröffentlicht am

Klang- und Musik-Produktion ist ein komplexer Arbeitsprozess der Software nicht nur Sequencing und flexibles Routing von Signalquellen und Filtern mit vielen Parametern abverlangt. Es müssen auch Projekte mit u.U. vielen Dateien verwaltet, Fehler vermieden und Anpassung auf viele verschiedene Hardware-Komponenten und Typen von Arbeitsabläufen vorgenommen werden können. Der Techtalk zeigt, wie gut sich Ableton Live in diesen Disziplinen schlägt indem es es ein flexibles und aufgeräumtes GUI mit integreirter Hilfe bereitstellt, das die Anforderungen von EN ISO 9241 nach subjektiven Masstäben mehr als erfüllt.

Veröffentlicht in: Design, Technologie, Unterhaltung & Humor
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.167
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
12
Aktionen
Geteilt
0
Downloads
31
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Hinweis: Proprietäre GUI Abe befasst sich mit einer komplexen Thematik Macht vieles Richtig Einleitende Fragen: Wer macht Musik oder sowas Ähnliches? Wer nutzt Computer für seine Musik? Wer weiß, was ein Sample ist?
  • Aufgabenangemessenheit geeignete Funktionalität, Minimierung unnötiger Interaktionen Selbstbeschreibungsfähigkeit Verständlichkeit durch Hilfen / Rückmeldungen Lernförderlichkeit Anleitung des Benutzers, Verwendung geeigneter Metaphern, Ziel: minimale Erlernzeit Steuerbarkeit Steuerung des Dialogs durch den Benutzer Erwartungskonformität Konsistenz, Anpassung an das Benutzermodell Individualisierbarkeit Anpassbarkeit an Benutzer und an seinen Arbeitskontext Fehlertoleranz Intelligente Dialoggestaltung zur Fehlervermeidung seitens der Benutzer steht an erster Stelle; ansonsten: erkannte Fehler des Benutzers verhindern nicht das Benutzerziel, unerkannte Fehler: leichte Korrektur durch den Benutzer
  • Organisation: physikalisch: Obertonreihe, Zahlenverhältnisse methodisch: Vorgehen der Erzeugung
  • Spezielles Look &amp; Feel. Rahmen nicht durch gewinkelte Linien sondern Flächen verschiedener Helligkeit mit gerundeten Kanten. -&gt; Besser für’s Auge bei vielen kleinen enthaltenen Komponenten
  • Layout: Sideviews-Ein ausklappen, Arrangement/Session-View Hilfe: Tutorials, Quick Help Aufnahme: In Session aufnehmen, Signal mit Effekten versehen, Jammen, in Arrangement ansehen
  • A GUI Best-Practices Example: Ableton Live

    1. 1. A GUI Best-Practices Example Ableton Live Techtalk von Henning Bergmeyer 20.10.2009
    2. 2. Übersicht <ul><li>Hintergrund: </li></ul><ul><ul><li>GUI-Standards: ISO 9241 </li></ul></ul><ul><ul><li>Echtzeit Klangbearbeitung, Komposition und Aufzeichnung </li></ul></ul><ul><li>Ableton Live GUI </li></ul><ul><ul><li>Layout, Look & Feel </li></ul></ul><ul><ul><li>Signalfluss (Vergleich mit anderen Routing-Ansätzen) </li></ul></ul><ul><ul><li>Widgets </li></ul></ul><ul><ul><li>Management von Dateien und Presets </li></ul></ul><ul><ul><li>Usability </li></ul></ul><ul><li>Demo </li></ul>
    3. 3. Richtlinien der Interaktion zwischen Mensch und Computer ( EN ISO 9241) <ul><li>EN ISO 9241-11 Gebrauchstauglichkeit </li></ul><ul><ul><li>Effektivität zur Lösung einer Aufgabe, </li></ul></ul><ul><ul><li>Effizienz der Handhabung des Systems, </li></ul></ul><ul><ul><li>Zufriedenheit der Nutzer einer Software. </li></ul></ul><ul><li>EN ISO 9241-110 Grundsätze der Dialoggestaltung </li></ul><ul><ul><li>Aufgabenangemessenheit </li></ul></ul><ul><ul><li>Selbstbeschreibungsfähigkeit </li></ul></ul><ul><ul><li>Lernförderlichkeit </li></ul></ul><ul><ul><li>Steuerbarkeit </li></ul></ul><ul><ul><li>Erwartungskonformität </li></ul></ul><ul><ul><li>Individualisierbarkeit </li></ul></ul><ul><ul><li>Fehlertoleranz </li></ul></ul>
    4. 4. Musik und Klang <ul><li>Musik ist die organisierte Form von Schallereignissen im von Menschen hörbaren Frequenzband </li></ul><ul><ul><li>Tonhöhe : Melodie und Harmonie </li></ul></ul><ul><ul><li>Klangfarbe : Schallspektrum und sein zeitlicher Verlauf </li></ul></ul><ul><ul><li>Rhythmus : Tempo, Metrum, Artikulation </li></ul></ul><ul><ul><li>Dynamik </li></ul></ul><ul><ul><li>Textur </li></ul></ul><ul><li>„ There is no noise, just sound.“ John Cage (* 1912 , † 1992) </li></ul><ul><li>physikalisch: Frequenz, Amplitude, Phase, veränderliche Mischung im zeitlichen Verlauf </li></ul><ul><li>mathematisch: Signal meist intervallweise fourier-transformiert </li></ul>http://commons.wikimedia.org/wiki/File:2006-02-13_Drop-impact.jpg
    5. 5. Workflow Real-time Sound Editing und Komposition <ul><li>Generierung von Klang, Harmonien und Rhythmen </li></ul><ul><ul><li>Sampling </li></ul></ul><ul><ul><li>Synthese </li></ul></ul><ul><li>Modellierung eines Klangraums und Positionierung der Klangquellen </li></ul><ul><ul><li>Verzögerung </li></ul></ul><ul><ul><li>Hall </li></ul></ul><ul><ul><li>Resonanz / Dämpfung </li></ul></ul><ul><li>Abmischung für Ausgabemedium </li></ul><ul><li>Andere WFs: DJ-ing, Scoring, … </li></ul>
    6. 6. Notationen <ul><li>Noten </li></ul><ul><li>Tracker Patterns </li></ul><ul><li>Bars </li></ul>
    7. 7. Einige Features von Ableton Live <ul><li>Bar Pattern Sequencer </li></ul><ul><li>Multi-Tracking </li></ul><ul><li>Synthese & Effekte </li></ul><ul><li>Signal-Routing & Mixing </li></ul><ul><li>Racks & Chains (Zusammenfassen von Komponenten)‏ </li></ul><ul><li>Szenen </li></ul><ul><li>Anbindung externer (Midi-) Controller </li></ul><ul><li>Automation </li></ul><ul><li>Verwaltung von Dateien und Presets </li></ul><ul><li>Integrierte Online-Hilfe und Tutorials </li></ul>
    8. 8. First Look on Ableton Live: Layout <ul><li>Dateiverwaltung </li></ul><ul><li>Online-Tutorials </li></ul><ul><li>Browser </li></ul><ul><li>Instrumente, Effekte, Presets, </li></ul><ul><li>Dateien, </li></ul><ul><li>Grooves </li></ul><ul><li>Quick Help </li></ul><ul><li>Tempo- und Ablaufsteuerung </li></ul><ul><li>MIDI </li></ul><ul><li>Arrangement-View </li></ul><ul><li>Session-View </li></ul><ul><li>Clip-View </li></ul><ul><li>Spur-View </li></ul>
    9. 9. Arbeitsumgebung: Studio mit Modularsystem <ul><li>http://trashaudio.blogspot.com/2007/11/workspace-and-environment-captain-ahab.html </li></ul>
    10. 10. Arbeitsumgebung <ul><li>GUI ist bei vielen Programmen Studiogeräten nachempfunden </li></ul><ul><ul><li>Vorteile </li></ul></ul><ul><ul><ul><li>Leichte Einarbeitung für Hardware-Erfahrene </li></ul></ul></ul><ul><ul><ul><li>Hübsche Optik / Nostalgie </li></ul></ul></ul><ul><ul><li>Nachteile </li></ul></ul><ul><ul><ul><li>Starre, uneinheitliche Anordnung der Bedienelement </li></ul></ul></ul><ul><li>Toll für Studio-Veteranen, Nostalgiker und Bastler, weniger für konstruktives Vorgehen. </li></ul>http://media.createdigitalmedia.net/cdmu/images/storiespre2k6/b4ii.jpg
    11. 11. Signal-Routing im Rack per virtueller Kabel in Propellerheads Reason Bild: http://www.musicianslife.de/wp-content/uploads/2008/01/reasonhinten1r4.jpg http://www.delamar.de/wp-content/uploads/2007/06/reason_4_reason4.jpg
    12. 12. Signal-Routing in Jeskola Buzz / BUZZle
    13. 13. Look & Feel von Ableton Live <ul><li>Einheitliche Darstellung </li></ul><ul><ul><li>Plug-ins bekommen automatisch zusätzliche Live-konforme UI </li></ul></ul><ul><ul><li>Gruppierung funktionaler Einheiten </li></ul></ul><ul><ul><ul><li>Synthese- u. Filter-Parameter </li></ul></ul></ul><ul><ul><ul><li>Spuren, Signal-Ketten, Racks </li></ul></ul></ul><ul><ul><ul><li>Szenen, Sets </li></ul></ul></ul><ul><ul><li>Farben und Zoom-Faktor anpassbar </li></ul></ul><ul><ul><li>Entfernt angelehnt an Star-Trek -Stil </li></ul></ul>
    14. 14. Star Trek GUI http://www.lcarsdeveloper.com /
    15. 15. Look & Feel von Ableton Live <ul><li>Kurze Befehlssequenzen </li></ul><ul><ul><li>kompakte Darstellung, z.B. durch Überlagerungen </li></ul></ul><ul><ul><li>Kontextmenüs </li></ul></ul><ul><ul><li>Nur zwei Hauptansichten </li></ul></ul><ul><ul><li>Routing über Spuren, Gruppen und Geräte </li></ul></ul>
    16. 16. Reiche GUI-Funktionen <ul><li>Layout zoom- und scrollbar </li></ul><ul><ul><li>Side-Views </li></ul></ul><ul><ul><li>Main-View </li></ul></ul><ul><li>Anzeigen </li></ul><ul><ul><li>Progress </li></ul></ul><ul><ul><li>Level, Peak, Panorama </li></ul></ul><ul><ul><li>Clips‏ </li></ul></ul><ul><ul><li>Kanäle und Szenen </li></ul></ul><ul><ul><li>Spektrum </li></ul></ul><ul><ul><li>Routing </li></ul></ul><ul><li>Steuer-Elemente </li></ul><ul><ul><li>Knobs, Slider, Switches </li></ul></ul><ul><ul><li>Hüllkurven und EQ </li></ul></ul><ul><ul><li>Racks + Makros </li></ul></ul><ul><ul><li>Midi-Controller-Belegung </li></ul></ul>
    17. 17. Datenmanagement <ul><li>Live-Browser </li></ul><ul><ul><ul><li>Instrumente </li></ul></ul></ul><ul><ul><ul><li>Midi-Effekte </li></ul></ul></ul><ul><ul><ul><li>Audio-Effekte </li></ul></ul></ul><ul><ul><ul><li>Plugin-Browser </li></ul></ul></ul><ul><ul><ul><li>3 User-Verzeichnisse </li></ul></ul></ul><ul><ul><ul><li>Grooves </li></ul></ul></ul><ul><ul><li>Drag’n’Drop u. Hot-Swap </li></ul></ul><ul><ul><li>Dateisystem-Operationen </li></ul></ul><ul><ul><li>Stichwortsuche </li></ul></ul><ul><ul><li>Vorhörfunktion </li></ul></ul><ul><li>Dateimanager </li></ul><ul><ul><li>Verwaltung von Projektdateien </li></ul></ul>
    18. 18. Demo der Ableton-Live GUI <ul><li>Look & Feel und Layout </li></ul><ul><li>Integration von Hilfe und Tutorials </li></ul><ul><li>Navigation: Ansichten, Zoomen, Konfiguration </li></ul><ul><li>Arrangement-Ansicht </li></ul><ul><ul><li>Clips und Mischung </li></ul></ul><ul><li>Session-Ansicht </li></ul><ul><ul><li>Instrumente und Clips (Drag’n’Drop) </li></ul></ul><ul><ul><li>Signal-Ketten, Routing und Effektsteuerung </li></ul></ul><ul><ul><li>Automation </li></ul></ul><ul><li>Racks </li></ul><ul><ul><li>Makro-Controller: Zusammenfassung von Ketten </li></ul></ul><ul><ul><li>Keyboard-Zonen-Belegung mittels Racks </li></ul></ul>
    19. 19. Beispielkonfiguration für viele Aufnahme und Controller-Kanäle
    20. 20. Fazit <ul><li>Ableton Live ist mehr als gebrauchstauglich </li></ul><ul><ul><li>effiziente Handhabung (Ansichten, Wiederverwendung, Kontext-Aktionen) </li></ul></ul><ul><ul><li>Einsatzspektrum nur beschränkt durch Rechnerleistung </li></ul></ul><ul><li>Einhaltung der Grundsätze der Dialoggestaltung </li></ul><ul><ul><li>bietet ein mehr als komplettes Basis-Set von Audio-Komponenten und effizienten Funktionen zu ihrer Organisation </li></ul></ul><ul><ul><li>Direktes, latenzfreies Aktionsfeedback an den Widgets und durch real-time Sound </li></ul></ul><ul><ul><li>Integrierte Hilfe und logisches Layout </li></ul></ul><ul><ul><li>Lernunterstützung durch integrierte Tutorials und konsistente Metaphern </li></ul></ul><ul><ul><li>Kaum Dialog-Vorgaben durch kurze Transaktionen </li></ul></ul><ul><ul><li>Parameter sind Standardkonform benannt und gruppiert </li></ul></ul><ul><ul><li>Individualisierbar durch Farben, Zoom, Datenmanagement, Presets… </li></ul></ul><ul><ul><li>Läßt keine fehlerhaften Eingaben zu </li></ul></ul>
    21. 21. Links <ul><li>GUI-Standards </li></ul><ul><ul><li>ISO9241: http://de.wikipedia.org/wiki/ISO_9241 </li></ul></ul><ul><li>Musikproduktion </li></ul><ul><ul><li>Ableton Live: http:// www.ableton.com </li></ul></ul><ul><ul><li>Buzz: http://www.buzzmachines.com , BUZZle: http://www.buzzle.de </li></ul></ul><ul><li>Star Trek GUI: http://www.lcarsdeveloper.com/ </li></ul><ul><li>Für Sound-Interessierte: </li></ul><ul><ul><li>Physical Modelling mit Ableton Collision : http://www.musicianslife.de/2009/07/10/ableton-collision/ </li></ul></ul>

    ×