Um den Design Methoden Finder in seiner ganzen Pracht erleben zu können, solltest du Javascript in deinem Browser aktivieren.

Kapitel und Themen


  • Schlagwörter

    • 0

      Abfolge

    • 0

      abgrenzen

    • 2

      Abhängigkeit

    • 0

      Ablauf

    • 3

      Adaptability

    • 0

      agil

    • 2

      Ähnlichkeit

    • 0

      Alltag

    • 2

      analog

    • 2

      analysieren

    • 0

      Anfänger

    • 2

      Annäherung

    • 0

      Anwender

    • 0

      Anwendung

    • 0

      App

    • 0

      Applikation

    • 2

      Assoziation

    • 0

      Atmosphäre

    • 2

      aufbereiten

    • 0

      aufwändig

    • 0

      Ausblick

    • 0

      ausprobieren

    • 0

      Baum

    • 0

      Bedienbarkeit

    • 0

      Bedürfnisse

    • 2

      Begriff

    • 20

      Beispiel

    • 0

      Benchmarking

    • 0

      Benutzer

    • 0

      Benutzerfreundlichkeit

    • 0

      Benutzerschnittstelle

    • 2

      Berufsnutzer

    • 0

      beschreiben

    • 1

      beurteilen

    • 0

      Bewegtbild

    • 0

      Bewegung

    • 1

      bewerten

    • 2

      Beziehung

    • 2

      Bezug

    • 0

      Bild

    • 1

      Bildschirm

    • 0

      Business

    • 0

      BWL

    • 1

      Chart

    • 2

      Cloud Computing

    • 4

      Coherence

    • 2

      Communification

    • 2

      Complementarity

    • 7

      Content Management

    • 7

      Content Strategy

    • 2

      Context Experience

    • 2

      darstellen

    • 7

      Daten

    • 1

      Dayflow

    • 1

      definieren

    • 0

      Demo

    • 0

      demografisch

    • 0

      Demonstration

    • 0

      Design

    • 2

      Desktop

    • 11

      Device

    • 1

      Device Experience

    • 3

      Device Shifting

    • 1

      Device Touchpoints

    • 2

      Diagramm

    • 0

      Dialog

    • 0

      Dialoggruppe

    • 0

      digital

    • 3

      Digitale Außenseiter

    • 2

      Digitale Avantgarde

    • 4

      Digitale Gesellschaft

    • 2

      Digitale Profis

    • 0

      Display

    • 0

      Dummy

    • 0

      Einblick

    • 2

      einfach

    • 0

      Einfluss

    • 2

      eingrenzen

    • 1

      einschätzen

    • 2

      Element

    • 0

      Emotion

    • 1

      Emotion Map

    • 5

      Emotionality

    • 0

      empirisch

    • 0

      Entwicklung

    • 0

      Entwurf

    • 0

      erfahren

    • 0

      erfassen

    • 0

      Ergonomie

    • 0

      erkennen

    • 0

      erkunden

    • 1

      erläutern

    • 0

      Erlebnis

    • 0

      Error

    • 0

      erweitern

    • 0

      erzählen

    • 8

      Experience

    • 0

      Experte

    • 0

      explorativ

    • 1

      Extensibility

    • 0

      extern

    • 0

      Farbe

    • 0

      Feedback

    • 0

      Fehler

    • 0

      Fehlerquelle

    • 0

      Film

    • 0

      Flow

    • 3

      Fluidity

    • 0

      Flussdiagramm

    • 0

      Fotografie

    • 0

      fragen

    • 0

      Funktion

    • 1

      Gamification

    • 0

      Gebrauchstauglichkeit

    • 2

      Gelegenheitsnutzer

    • 1

      gemeinsam

    • 0

      Gerät

    • 5

      Geräte-Prototypen

    • 5

      Geräteklassen

    • 0

      geschäftlich

    • 0

      Geschichte

    • 0

      Gestaltung

    • 0

      Gestik

    • 1

      Grafik

    • 1

      grafisch

    • 0

      Grenze

    • 2

      Gruppe

    • 5

      GUI

    • 1

      Halb-öffentlicher Raum

    • 0

      Handlung

    • 0

      Haptik

    • 0

      haptisch

    • 0

      hineinversetzen

    • 0

      Horizont

    • 1

      Hybrid Media

    • 0

      Ideenfindung

    • 0

      Illustration

    • 0

      Implementierung

    • 10

      Information

    • 5

      Information Experience

    • 11

      Informationsmanagement

    • 9

      Inhalt

    • 0

      insight

    • 0

      Inspiration

    • 5

      Interaktion

    • 0

      interdisziplinär

    • 5

      Interface

    • 0

      intern

    • 1

      interpretieren

    • 0

      Interview

    • 0

      Iteration

    • 1

      Karte

    • 1

      Kategorien

    • 0

      Kenntnisse

    • 2

      kognitiv

    • 3

      Kommunikation

    • 1

      Kommunikationstool

    • 0

      kompakt

    • 1

      Kompendium

    • 1

      komplex

    • 0

      Konkurrenz

    • 2

      Kontext

    • 2

      Kontext-Prototypen

    • 2

      Kontextrelevanz

    • 0

      Konzept

    • 0

      Körper

    • 0

      kreativ

    • 0

      Kreativität

    • 0

      Kritik

    • 0

      Kultur

    • 0

      kulturell

    • 0

      Kunden

    • 0

      kurz

    • 0

      Labor

    • 0

      Laie

    • 2

      Laptop

    • 3

      Layout

    • 2

      Lean Back

    • 1

      Lean Forward

    • 3

      Limbic Map

    • 2

      manuell

    • 2

      Mapping

    • 0

      Marketing

    • 1

      Mashability

    • 1

      Mashup

    • 0

      materiell

    • 0

      Menschen

    • 0

      mental

    • 0

      Metapher

    • 23

      Methode

    • 1

      Microexperiences

    • 1

      Microjoyment

    • 3

      Mobile First

    • 5

      Mobile Situation

    • 6

      Mobiler Nutzungskontext

    • 4

      Mobiles Endgerät

    • 0

      Mock-up

    • 0

      Modell

    • 0

      moderieren

    • 8

      Multiscreen

    • 6

      Multiscreen Experience

    • 4

      Multiscreener

    • 0

      mündlich

    • 21

      Muster

    • 0

      nachfühlen

    • 0

      nachhaltig

    • 0

      Navigation

    • 2

      Netz

    • 5

      Neuro

    • 0

      Notiz

    • 15

      Nutzer

    • 9

      Nutzer-Prototypen

    • 0

      Nutzerbedürfnisse

    • 7

      Nutzerverhalten

    • 0

      nutzerzentriert

    • 3

      Nutzungskontext

    • 2

      Nutzungsmodus

    • 0

      Oberfläche

    • 0

      Objekt

    • 0

      objektiv

    • 1

      Öffentlicher Raum

    • 0

      Ökonomie

    • 0

      ökonomisch

    • 0

      optimieren

    • 2

      Papier

    • 9

      Persona

    • 0

      Personen

    • 0

      persönlich

    • 0

      Perspektive

    • 0

      Perspektivwechsel

    • 0

      Phasen

    • 0

      Photographie

    • 0

      physisch

    • 20

      Prinzip

    • 1

      Privates Umfeld

    • 0

      Produkt

    • 0

      Programm

    • 0

      Prototyp

    • 0

      Prozessoptimierung

    • 0

      prüfen

    • 5

      Psychologie

    • 1

      qualitativ

    • 0

      Qualitätssicherung

    • 1

      quantitativ

    • 3

      Quellen

    • 1

      Recht

    • 0

      Reihe

    • 0

      Reizwort

    • 2

      Relation

    • 1

      repräsentativ

    • 1

      Research

    • 3

      Responsive Design

    • 0

      Review

    • 0

      Rollenspiel

    • 0

      sammeln

    • 0

      Sammlung

    • 1

      Schaubild

    • 0

      schnell

    • 1

      Schnittstelle

    • 0

      schriftlich

    • 7

      Screen

    • 3

      Screen Sharing

    • 8

      Second Screen

    • 0

      selbst

    • 0

      semantisch

    • 3

      Service

    • 2

      Service Experience

    • 0

      Simulation

    • 4

      Simultaneity

    • 2

      Simultannutzung

    • 2

      Situation

    • 1

      Skala

    • 0

      Skizze

    • 1

      Smart Content

    • 3

      Smart TV

    • 2

      Smart-Native

    • 4

      Smartphone

    • 3

      Social Media

    • 4

      Social TV

    • 0

      Software

    • 2

      sortieren

    • 2

      Sortierung

    • 0

      sozial

    • 0

      Spezifikation

    • 3

      Stationäre Situation

    • 0

      Statistik

    • 0

      Steps

    • 0

      Stimmung

    • 0

      Story

    • 1

      Storyfication

    • 1

      Storytelling

    • 22

      Strategie

    • 1

      Struktur

    • 2

      subjektiv

    • 0

      Substitut

    • 0

      suchen

    • 6

      Synchronisation

    • 0

      System

    • 1

      systematisch

    • 0

      Szenario

    • 3

      Tablet

    • 2

      Tafel

    • 2

      Teamwork

    • 0

      Technik

    • 0

      technisch

    • 0

      Technologie

    • 0

      Test

    • 0

      Text

    • 0

      Tool

    • 3

      Toolkit

    • 2

      Touchpoint

    • 1

      Touchpoint Matrix

    • 1

      Touchpoints

    • 0

      Tracking

    • 1

      Transmedia Storytelling

    • 0

      Trend

    • 3

      Trendnutzer

    • 3

      TV

    • 0

      übertragen

    • 0

      UI

    • 2

      Umfeld

    • 0

      Umfrage

    • 0

      Umgebung

    • 0

      umsetzen

    • 0

      Umsetzung

    • 1

      Uncanny Valley

    • 0

      untersuchen

    • 1

      Unterwegs

    • 0

      Usability

    • 16

      User

    • 8

      User Centered Design

    • 10

      User Experience

    • 6

      User Experience Design

    • 4

      User Generated Content

    • 0

      UX

    • 0

      verbessern

    • 0

      verfolgen

    • 1

      Vergleich

    • 4

      Verhalten

    • 4

      Verhaltensmuster

    • 1

      Verhältnis

    • 5

      Vernetzung

    • 0

      Versuch

    • 0

      versuchen

    • 0

      Video

    • 0

      Vision

    • 4

      Visual Design

    • 2

      Visualisierung

    • 2

      visuell

    • 0

      Voraussage

    • 0

      Vorgang

    • 0

      Vorgehensweise

    • 0

      Vorhersage

    • 0

      Vorschau

    • 0

      wahrnehmen

    • 0

      Wahrnehmung

    • 0

      Website

    • 0

      wirtschaftlich

    • 0

      wissenschaftlich

    • 0

      zeichnen

    • 0

      Ziel

    • 0

      Zielgruppe

    • 0

      Zufall

    • 0

      Zukunft

    • 2

      zusammen


Coherence

Ein Interface sollte geräteübergreifend nachvollziehbar und verständlich sein sowie ähnlich und in logischem Zusammenhang dargestellt werden.

msx_muster_coherence

Ein Interface muss auf den verschiedenen Plattformen und Screens nicht exakt gleich aus­sehen, es sollte aber ähnlich sein. Inhalte sollten trotz aller Unterschiede der verschiedenen Geräte und Bildschirme mög­lichst kohärent, schlüssig, visuell einheitlich, nachvollziehbar und in logischem Zusammenhang dar­gestellt werden. Bei Coherence liegt der Schwerpunkt auf der grafi­schen Benutzeroberfläche (engl. Graphical User Interface, GUI) und der visuellen Gestaltung. Das Prinzip ergänzt sich mit  Adaptability und Fluidity zum Meta-Prinzip Fluid Experience.

Adaptability

Um geräteübergreifendes Informationsmanagement zu vereinfachen, können sich Layouts und Inhalte dynamisch und flexibel an die jeweiligen Geräteeigenschaften anpassen. Bei Adaptability liegt der Schwerpunkt auf dem Inhalt und Layout. Das Unterprinzip ergänzt sich mit Coherence und Fluidity zum Meta-Prinzip Fluid Experience und bildet eine Brücke zu Smart Content.

Layouts müssen für alle Bildschirme gestaltet werden: fließend, proportional und relativ. Selbst innerhalb der einzelnen Geräteklassen gibt es zum Teil gravierende Unterschiede in Bezug auf Displaygröße und Bildschirmauf­lösung. Um diese Herausforderung zumindest ansatzweise in den Griff zu be­kommen, empfiehlt sich der Einsatz von flexiblen, skalierbaren, anpassungsfähigen und auf die jeweiligen Endgeräte bzw. Screens und deren Eigenschaften reagierende Layouts (vgl. Marcotte, 2010 und Tran, 2011). Spalten, Reihen, Bild- und Textgrößen werden (bei gleichbleibendem Inhalt) dynamisch an unterschiedliche Bildschirmformate angepasst.

Responsive oder Adaptive Webdesign
Es gibt unterschiedliche Vorgehensweisen. Entweder passt sich die Anordnung des Inhalts beim Verkleinern des Browsers ständig an die sich verändernde Layout-Breite an. Oder man definiert zwei oder mehrere Breakpoints für die Ausgabe auf verschiedenen Geräten. Breakpoints sind Schwellenwerte, ab denen andere oder neue Layout-Vorgaben, Regeln und Definitionen gelten. Allgemein formu­liert: Man legt die maxi­malen bzw. mini­malen Maße eines Bildschirmformates (z.B. des iPads) fest. Für diesen Bereich werden dann die jeweiligen Stile angewendet. Die Vorgehensweisen können auch kombiniert werden.

Layout-Kategorien und Layout-Muster
Wenn sich die Geräteeigenschaften ändern, hat das meistens Auswirkungen auf das Layout. Dieses lässt sich einigermaßen an die unterschiedlichen Bildschirmgrößen und -auflösungen anpassen, wenn man beispielsweise abhängig von der Auflösung und dem Gerätetyp passende Layout-Kategorien, entsprechende Regeln, Templates und (Resolution) Break Points definiert (Wroblewski, 2011d).

Luke Wroblewski hat mit Hilfe der Responsive Webdesign Galerie mediaqueri.es fünf allgemeingültige Layout-Muster identifiziert (Wroblewski, 2012a): Mostly Fluid, Column Drop, Layout Shifter, Tiny Tweaks, Off Canvas. Diese Muster unterscheiden sich in der Anordnung der einzelnen Layout-Elemente abhängig von der sich ändernden Bildschirmbreite. Bei einigen verschmälert sich lediglich der Inhaltsbereich, bei anderen werden Layout-Elemente mit Erreichen der jeweiligen Resolution Break Points schrittweise unterhalb des Hauptinhalts oder ganz anders angeordnet.  In den nachfolgenden Illustrationen steht die dunkelste Fläche jeweils exemplarisch für den wichtigsten Inhalt.

Weitere Details und Anregungen sind im Buch zu finden.

Beispiele

Unter www.mediaqueri.es gibt es viele Responsive Design-Beispiele mit unterschiedlichen inhaltlichen und gestalterischen Ausprägungen und Schwerpunkten. Stellvertretend und exemplarisch zeigen wir hier die Website von foodsense.is. Die Inhalte der Seite werden mit kleiner werdendem Screen nach und nach verkleinert und untereinander angeordnet.

Beispiel Coherence foodsense.is

Tags

Adaptability

Beispiel

Coherence

GUI

Inhalt

Interface

Layout

Methode

Muster

Prinzip

Responsive Design

Strategie

Visual Design