4.2 Entwurf und Prototyping

Antwort:

• Definition: Reduzierte Darstellungen von grafischen Benutzerschnittstellen in Schwarz-Weiß.

• Zweck: Darstellung der Auswahl und Platzierung von Interface-Elementen ohne Fokus auf visuelles Design.

• Verwendung: Klärung von Strukturfragen und als Kommunikationsmittel zwischen Designern und Entwicklern.

Das Konzept der Darstellungstreue besagt, wie nah ein Prototyp an der finalen Umsetzungsform orientiert ist.

• Es ist irreführend, weil ein Prototyp eine Reihe an Aspekten aufweist, die unterschiedlich weit in der Entwicklung sein können.

• Dazu gehören unter anderem die Funktionsbreite und -tiefe, die Darstellung und Interaktion, der Inhalt sowie das Branding.

Antwort:

• Darstellung in unterschiedlichen Detailstufen.

• Fokus auf Proportionen und Platzierung, nicht auf visuelle Ästhetik.

• Können handgezeichnet oder digital erstellt werden.

• Grundlage für Usability-Tests und Prototypen.

1. Antwort:

   • Wireframes: Höherer Detailgrad, oft in Originalgröße, dienen als Grundlage für Tests.

   • Skizzen: Geringer Detailgrad, Fokus auf schnelle Ideenfindung und Flexibilität.

     
     

2. Antwort:

   • Handgezeichnet: Schneller, für frühe Phasen geeignet, Fokus auf grobe Struktur.

   • Digital: Höherer Aufwand, aber präzisere Darstellung, Verwendung von Blindtext und echten Inhalten möglich.

Antwort:

• Spezialisierte Software: Balsamiq, Axure (für interaktive Wireframes).

• Browserbasierte Tools: Schnell und einfach teilbar.

• Grafikprogramme: Adobe Photoshop/Illustrator (für präzise Designs).

• Präsentationstools: PowerPoint/Keynote (einfache interaktive Wireframes).

Antwort:

• Digitale Wireframes können verlinkt werden, um klickbare Prototypen zu erstellen.

• Ermöglicht einfache Benutzertests.

• Softwareabhängig (z. B. Axure bietet komplexe Interaktivität).

1. Antwort:

   • Blindtext imitiert Fließtext, wenn echte Inhalte fehlen.

   • Ermöglicht das Testen von Layouts und Schriftbildern ohne tatsächliche Inhalte.

1. Antwort:

   • Wireflow: Interaktiv verknüpfte Wireframes, die Benutzerflüsse visualisieren.

   • Task-Flow-Diagramm: Diagramme, die Schritte und Entscheidungen bei der Interface-Nutzung darstellen.

Antwort:

• Anwendung: Schlüsselseiten und kritische Pfade, Visualisierung der Informationsstruktur.

• Grenzen: Nicht für die vollständige Interface-Darstellung geeignet. Interaktive Details oft unberücksichtigt.

Antwort:

• Unterstützen die Strukturierung und Planung von Interfaces.

• Fördern Teamkommunikation und Benutzerorientierung.

• Schnelles Feedback und Anpassungen möglich, bevor visuelle Details hinzugefügt werden.

Blindtext

Blindtext imitiert Fließtext in einem Layout, wenn echte Inhalte noch fehlen.

• Er besteht aus Zeichenfolgen und erfundenen Wörtern, die das Schriftbild echter Inhalte nachahmen.

Task-Flow-Diagramm:

Ein Task-Flow-Diagramm zeigt in Sequenz die Schritte und Entscheidungen, die für die Bearbeitung einer Aufgabe in einer Benutzerschnittstelle nötig sind.

Prototyping ist die Erstellung von Modellen eines Interface, um Konzepte, Funktionen und Interaktionen zu testen.

• Zweck:

  • Reduzierung der Varianten im Designprozess.

  • Testen von Konzepten, bevor viel Zeit und Ressourcen investiert werden.

  • Informierte Entscheidungen über Gestaltung und Funktionalität ermögliche

• Skizzen: Geringer Detailgrad, für frühe Ideenentwicklung.

• Prototypen: Höherer Detailgrad, um Konzepte zu testen und konkrete Feedbacks zu erhalten.

• Verknüpfung: Skizzen sind oft die Grundlage für Prototypen.

Maß, in dem ein Prototyp das spätere Interface repräsentiert.

• Kategorien:

  • Niedrige Fidelity: Grobe Darstellung (Papierprototypen, Skizzen).

  • Hohe Fidelity: Detailgetreue Darstellung (digitale Mockups, programmierte Prototypen).

Horizontal:

Breite Darstellung vieler Screens und Ansichten, ohne funktionale Tiefe.

• Beispiel: Klickprototypen, die die Navigation zwischen Screens zeigen.

Vertikal:

Tiefe technische Funktionalität in wenigen Bereichen, aber begrenzte Ansichten.

• Beispiel: Prototyp mit vollständiger Suchfunktion, aber wenigen Screens.

Papierversion eines Interface für Usability-Tests in frühen Phasen

• Vorteil: Schnell, kostengünstig, flexibel für Änderungen.

• Ablauf:

  1. Testnutzer löst Aufgaben durch Interaktion mit Papier-Elementen.

  2. „Menschlicher Computer“ simuliert die Reaktion des Systems durch Austausch oder Änderung der Papierteile.

  3. Moderator dokumentiert Ergebnisse und Feedback.

  
  

• Kosteneffizienz: Minimaler Materialaufwand.

• Flexibilität: Einfache und schnelle Änderungen möglich.

• Kommunikation: Fördern Diskussionen und Feedback im Team.

• Iteratives Design: Ermöglichen mehrere Testzyklen in kurzer Zeit.

• Keine realistische Simulation komplexer Interaktionen (z. B. Drag & Drop, Scrollen).

• Schwierige Darstellung technischer Funktionen wie Datenbankverbindungen.

• Eingeschränkte Visualisierung von Animationen und dynamischen Inhalten.

Kurze Filme, die die Nutzung eines Interface im Anwendungskontext simulieren.

• Anwendung:

  • Visionäre Prototypen: Darstellung futuristischer Technologien.

  • Holistische Prototypen: Simulation von Funktionen in realistischen Szenarien.

    
    

• Vorteil:

  • Leicht verständlich und emotional ansprechend.

Prototypen, bei denen ein Mensch im Hintergrund die Funktionalität simuliert.

• Ablauf:

  1. Testnutzer interagiert mit dem Interface.

  2. „Operator“ steuert das System manuell, ohne dass der Nutzer dies weiß.

  
  

• Vorteil: Günstige Evaluation nicht entwickelter Technologien (z. B. Sprachsteuerung).

Hochdetaillierte, funktionale Modelle eines Interface.

• Vorteile:

  • Realistische Darstellung von Aussehen und Interaktion.

  • Wiederverwendbarkeit des Codes für das finale Produkt.

• Einsatz: Spätere Phasen für formale Tests und Präsentationen.

• Papierprototypen: Für frühe Konzepttests.

• Videoprototypen: Für komplexe Nutzungsszenarien oder emotionale Wirkung.

• Wizard-of-Oz: Für Evaluation neuer Technologien ohne vollständige Entwicklung.

• Programmierte Prototypen: Für realistische Tests und Management-Präsentatio

• Testen: Identifikation von Problemen in frühen Phasen.

• Feedback: Schnelle Anpassungen und Verbesserungen.

• Kosteneffizienz: Verhindert teure Änderungen in späteren Phasen.

• Zeitaufwand: Hohe Fidelity-Prototypen sind aufwendig zu erstellen.

• Technische Grenzen: Simulation komplexer Funktionen kann schwierig sein.

• Teamkommunikation: Missverständnisse über den Zweck des Prototyps.

• Identifizieren von Problemen bei Navigation, Layout und Funktionalität.

• Testen der Benutzerfreundlichkeit und Verständlichkeit.

• Klärung von Anforderungen und Erwartungen der Nutzer.

• Fördert benutzerzentrierte Entwicklung.

• Ermöglicht iteratives Testen und Verfeinern von Ideen.

• Reduziert Risiken und spart Zeit und Ressourcen in der Endphase.

Bei Videoprototypen kann man visionäre und holistische Prototypen unterscheiden. Erstere eigenen sich zur Darstellung neuer Technologien, die nur schwer zu implementieren wären. Letztere sind besonders geeignet für die partizipative Entwicklung von Benutzerschnittstellen.

Mithilfe von Wireframes lassen sich Aspekte der Informationsarchitektur und des Seitenlayouts darstellen und evaluieren.

• Die Verbindung mehrerer Wireframes eignet sich hierbei, um zu testen, ob die Interaktion für eine bestimmte Aufgabe erfolgreich abläuft.

• Die Anordnung und Auswahl von Elementen auf einzelnen Wireframes eignet sich dazu zu prüfen, ob die richtigen Elemente für die Aufgabe ausgewählt wurden und ob sie verständlich platziert sind.

Die gezeichnete oder interaktive Verknüpfung mehrerer zusammenhängender Wireframes wird auch Wireflow genannt.

Wireframes zur Darstellung der übergeordneten Struktur eignen sich gut, um die Grundstruktur eines User Interface zu testen.

Wireframes zur Darstellung kritischer Handlungspfade zeichnen einzelne Handlungssequenzen von Anfang bis Ende nach.

Guidelines:

Regeln und Prinzipien für die Gestaltung von Benutzerschnittstellen (z. B. Platzierung von Elementen).

Styleguides:

Detaillierte Dokumente, die das visuelle Erscheinungsbild eines Interface beschreiben, inkl. Corporate Identity.

-> Ziel: Konsistenz in der Gestaltung und Orientierung für Entwickler und Designer.

1. Kontrollelemente: Links, Drop-down Menüs, Auswahlboxen, Suchfunktion.

2. Steuerelemente: Werkzeugleisten, Menüs.

3. Ansichtselemente: Sidebars, Tabs, Spaltenansichten.

4. Darstellungselemente: Fortschrittsbalken, Cursor-Anzeigen.

5. Nachrichten: Fehlermeldungen, Warnungen, Benachrichtigungen.

6. Eingabemöglichkeiten: Maus, Tastatur, Touchpad, Drag & Drop.

7. Fensterelemente: Dialogfenster, Assistenten, Eigenschaftsfenster.

• Typografie: Schriften, Schriftschnitte, Schriftgrößen, Formatierungen.

• Farben: Farbpaletten und deren Einsatz.

• Layout: Pixelgenaue Rastersysteme, Anordnung von Menüs, Logos, Titeln, Bildern.

• Corporate Identity: Anwendung von Logos und Branding.

• Umfassendes Dokument, das mehrere Aspekte wie Styleguides und Guidelines kombiniert.

• Enthält Prinzipien, Spezifikationen und Beispiele für ein konsistentes Design.

• Beispiel: Google Material Design, Apple Human Interface Guidelines.

Sammlung von Design Patterns (wiederverwendbare visuelle und funktionale Elemente).

-> Beschreiben, wie und wann bestimmte Patterns eingesetzt werden.

-> Enthalten oft passenden (CSS-)Code für die Umsetzung.

• Konsistenz: Einheitliches Erscheinungsbild und Nutzererlebnis.

• Effizienz: Erleichtern die Zusammenarbeit zwischen Designern und Entwicklern.

• Flexibilität: Guidelines bieten Spielraum für Interpretation, Styleguides detaillierte Vorgaben.

• Aktualität: Styleguides können schnell veralten.

• Flexibilität: Strenge Vorgaben können kreative Freiräume einschränken.

• Interpretation: Abstrakte Guidelines führen zu unterschiedlichen Ergebnisse

1. Antwort:

• Große Unternehmen (z. B. Apple, Google, Microsoft) erstellen umfassende Guidelines für ihre Produkte.

• Dienen der Standardisierung und Präzisierung von Interface-Designs.

1. Antwort:

• Guidelines: Allgemein formulierte Prinzipien, flexibel anwendbar, bleiben länger aktuell.

• Styleguides: Konkrete Spezifikationen (z. B. Farben, Schriften), können schnell veralten.

1. Antwort:

   • „Textlinks sollten immer blau und unterstrichen dargestellt werden.“

   • Vorteil: Erhöht die Wiedererkennbarkeit und Usability.

     
     

2. Antwort:

• „Hebe interaktive Elemente deutlich sichtbar hervor.“

• Vorteil: Flexibel anwendbar, bleibt länger aktuell.

1. Antwort:

• Prägen die Erwartungshaltung der Nutzer (z. B. Navigationsleisten oben auf Websites).

• Abweichungen von Standards können zu Usability-Problemen führen.

  
  

1. Antwort:

   • Anpassung an neue Technologien und Trends.

   • Vermeidung von veralteten Spezifikationen, die die Konsistenz gefährden.

• Ermöglichen die Wiederverwendung bewährter Designlösungen.

• Erleichtern die Implementierung durch bereitgestellten Code.

• Unterstützen konsistentes Design über verschiedene Projekte hinweg.

  
  

Antwort:

• Styleguides spiegeln das Corporate Design eines Unternehmens wider.

• Detaillierte Vorgaben zu Farben, Logos und visuellen Elementen sichern einheitliches Branding.

User Interface Guidelines sind allgemeiner formuliert als Styleguides und beziehen sich auf Aspekte der Interaktionsgestaltung und den Einsatz von Interaktionselementen.

Styleguides dienen dagegen der detaillierten Beschreibung aller visuellen Aspekte des User Interface.

Alles, was sich nicht in dieser konkreten Form festlegen lässt, wird in den Guidelines in Form von Prinzipien beschrieben.

Wiederkehrende Umsetzungs- und Anwendungsmuster in der Interfacegestaltung werden auch als Design Patterns bezeichnet. Diese sind hierarchisch strukturiert und in sogenannten Pattern Libraries organisiert, die häufig auch den Code für die Implementierung zur Verfügung stellen.

Das Selbstbild eines Unternehmens, sichtbar durch Corporate Design wie Schriften, Logos, Farben und Gestaltungsraster.