Microsoft-Designprinzipien

Grundlage für optimales Design

Wir sind der Meinung, dass die Microsoft-Designprinzipien Ihnen die Erstellung von Store-Apps erleichtern, die Ihren Benutzern Freude machen und auf die Sie stolz sein können. Wenden Sie diese Prinzipien an, wenn Sie Ihre App planen, und richten Sie Ihre Entwurfs- und Entwicklungsentscheidungen danach aus.

Modernes Design

Microsoft ist bei der Technologie in vielen Bereichen und mit einer Vielzahl von Produkten schon lange führend. Vor Kurzem führten dann Veränderungen dazu, dass das Design noch stärker in den Mittelpunkt rückte. Bei diesen Veränderungen ging es darum, dass solide Fundamente, aufregende und bahnbrechende Ideen und umfassende Möglichkeiten gefragt waren und alles andere einfach antiquiert erschien. Die Grundlagen dieser Veränderungen waren der Ausgangspunkt der Microsoft-Designprinzipien.

Die Designphilosophie von Microsoft zeichnet sich durch aufgeräumte, übersichtliche App-Bildschirme aus, die schnelle Reaktionen erlauben, den Eingabeaufwand minimieren und Benutzer automatisch über neue und aktualisierte Informationen benachrichtigen. Die Benutzer interagieren mit den Inhalten anstatt mit den Steuerelementen, mit denen die Inhalte dargestellt werden. Visuelle Elemente werden perfekt angeordnet und grafisch dargestellt.

Grundlagen des modernen Designs

Unser modernes Design bietet viel mehr Tiefe, Charakter und Hintergrund, als die Bezeichnung "Flat Design" vermuten lässt. Die Designsprache basiert auf drei unterschiedlichen Säulen.

• Bauhaus: Ab 1919 hat diese berühmte Designschule die kompromisslose Designphilosophie vertreten, dass alles Überflüssige beseitigt werden sollte. Die erste Aufgabe besteht darin zu verstehen, welche Kernfunktionen Ihre App hat. Es erfordert jedoch viel Disziplin, die Funktionen radikal auf diesen Kern zu beschränken. Antoine de Saint-Exupéry hat sinngemäß gesagt, dass Vollkommenheit dann entsteht, wenn man nichts mehr wegnehmen kann. Einfachheit führt zu Schönheit, jedoch gleichzeitig auch zu mehr Benutzerfreundlichkeit.

• Internationaler Typografiestil (Schweizer Stil): Das Design von Microsoft wurde vom Schweizer Stil inspiriert, bei dem ein sauberer und ansprechender Fettdruck-Schriftstil im Vordergrund steht. Hauptziele sind Klarheit, Lesbarkeit und Objektivität. Dieser Stil erfordert sowohl in typografischer als auch in visueller Hinsicht die prinzipientreue und optisch ansprechende Verwendung eines Rasters sowie von asymmetrischen Layouts.

• Bewegungsdesign: Bewegung erweckt die Benutzeroberfläche zum Leben und vermittelt Eleganz. Dabei lassen wir uns von Pionieren wie Saul Bass inspirieren, der Bewegung in Verbindung mit Schrift und Designelementen eingesetzt hat, um großartige Titelsequenzen für Filme zu schaffen. Gutes Bewegungsdesign erhöht nicht nur den Spaß, sondern kann Benutzern auch verdeutlichen, wie eine Aufgabe durchzuführen ist.

Weitere Informationen zu diesen Säulen des Designs finden Sie unter Modernes Design bei Microsoft.

Davon haben wir uns zu unseren Prinzipien inspirieren lassen, die zur Grundlage unseres gesamten Designs geworden sind. Auch wenn dies die von uns gewählten Prinzipien sind, sind sie doch auch allgemeingültig für den gesamten Designbereich. Wir hoffen, dass sie Ihnen als Hilfe beim Vertreiben Ihrer Produkte über unsere Plattform dienen. Die Microsoft-Designprinzipien lauten:

• Seien Sie stolz auf Ihre gute Arbeit
• Weniger ist oft mehr
• Schnell und flüssig
• Wirklich digital
• Gemeinsam gewinnen

Seien Sie stolz auf Ihre gute Arbeit

Es hat einen Grund, dass dieses Prinzip an erster Stelle steht. Schöpfer, Erbauer und Handwerker haben sich schon immer als professionelle Arbeiter hervorgetan, indem sie auf ihre Arbeit stolz waren. Bei diesem Prinzip geht es darum, Zeit, Energie und Leidenschaft auch in die kleinsten Details zu investieren, mit denen viele Benutzer häufig in Berührung kommen. Es geht um das Entwerfen von Oberflächen und Umgebungen, die sich durchgängig durch Vollständigkeit und hohe Qualität auszeichnen – von perfekt ausgerichteten Pixeln in einem Raster über die Farbauswahl bis hin zu den Schriftarten auf einer App-Seite. Arbeiten Sie so, dass Sie in jeder Phase der Entwicklung stolz auf Ihre Handwerkskunst sein können.

Nutzung des Rasters

Beim Grafikdesign ist das moderne Typografieraster das Gerüst, das Ihren Inhalten Halt bietet. Die proportionale Anordnung von Elementen hat sowohl ästhetische als auch praktische Vorteile. Benutzer können Seiten so schnell und bequem erfassen.

Hierarchie und Balance

Um Benutzern die visuelle Hierarchie Ihrer App zu verdeutlichen, ist es ratsam, für unterschiedliche Arten von Informationen unterschiedliche Eigenschaften zu verwenden. Sie können dafür mit dem Schriftgrad, der Schriftfarbe, der Positionierung und Abständen arbeiten, damit die verschiedenen Ebenen der Hierarchie voneinander abgegrenzt werden. Wenn Sie die unterschiedlichen Eigenschaftswerte konsequent nutzen, wird der Rhythmus der App für Benutzer deutlich, und jede Ebene ist einzigartig und sofort erkennbar.

Hierarchie	Unzureichende Hierarchie

Großer Text, hoher Farbkontrast: Im obigen Beispiel ist das Wort "threads" die Kopfzeile des gewählten Pivot-Elements. Damit wird der Kontext für die darunter aufgeführten Inhalte geschaffen. Die Kopfzeile weist einen hohen Kontrast auf (Weiß auf Schwarz), womit verdeutlicht wird, dass es sich um das auf der Seite ausgewählte Element handelt. Der Kontrast des anderen Elements in der Kopfzeile ist geringer (Grau auf Schwarz), sodass es weniger stark hervorgehoben ist.

Nächstgrößerer Text: Das wichtigste Detail in der Liste der Threads ist der Name der Person, an die die Nachricht gesendet werden soll.

Kleinster Text: Am zweitwichtigsten sind die ersten ein oder zwei Zeilen der einzelnen Nachrichten. Gelesene und ungelesene Nachrichten sind farblich voneinander sowie vom Namen abgegrenzt.

Abstände und Ausrichtung: Lassen Sie mehr Platz zwischen Threads und weniger Platz innerhalb eines Threads, um die Hierarchie klar wiederzugeben. Wenn der Zeitstempel einer Nachricht rechtsbündig ausgerichtet ist, ist dies schon eine ausreichende Hervorhebung.

Unzureichende Hierarchie: Ohne Hierarchie gehen die Bedeutung und Lesbarkeit der Seite verloren. Die Ästhetik leidet, aber – was viel wichtiger ist – auch die Benutzerfreundlichkeit kommt zu kurz.

Wer sind Sie?

Ermitteln Sie die Typografie, mit der die Persönlichkeit Ihrer App am besten widergespiegelt wird. Unten sind Beispiele aufgeführt, wie Typografie als Ergänzung und zur Definition der App eingesetzt wird.

New York Times-App: Altbekannte Schriftarten spiegeln die Seriosität der Zeitung wider

Camera360: Die Schriftarten in dieser App sind zeitgemäß und stylish.

Zusammenfassung und Prüfliste

• Arbeiten Sie sorgfältig an den Details.
• Machen Sie die Nutzung von Apps sicher und zuverlässig.
• Beachten Sie die Balance, Symmetrie und Hierarchie.
• Passen Sie das Layout Ihrer App an das Raster an – das neue Layout für Apps.
• Machen Sie Ihre App für eine größtmögliche Benutzergruppe zugänglich, einschließlich Personen mit Beeinträchtigungen oder Behinderungen. Weitere Informationen finden Sie unter Barrierefreiheit: Designrichtlinien.

Weniger ist oft mehr

Bei diesem Prinzip beschränken Sie Ihre App ausschließlich auf die Kernfunktionen. Konzentrieren Sie sich auf den Inhalt, nicht auf irgendwelche Spielereien. Inhalt kann unterschiedlicher Art sein: Bilder, E-Mails, Nachrichtenartikel usw. Lassen Sie überflüssige Spielereien weg, damit auf dem Bildschirm nur die wirklich relevanten Elemente übrig bleiben. Erstellen Sie die Navigationselemente so weit wie möglich aus den Inhalten selbst. Aufgeräumte, immersive Benutzeroberflächen sollten die Regel sein. Jedes Element auf dem Bildschirm muss für den Benutzer nützlich sein und einem eindeutigen Zweck dienen.

Dies bedeutet nicht, dass Sie dafür die intuitive Bedienung opfern sollen. Ein Design ist erfolgreich, wenn Benutzer anhand der Navigationselemente leicht erkennen, wie sie mit der App interagieren können. Bei einem guten Design herrscht ein ausgewogenes Verhältnis von intuitiver Bedienung und Reduzierung, um ein klares, ansprechendes Endprodukt zu erhalten.

Inhalt vor Spielerei

Ermöglichen Sie Benutzern die direkte Interaktion mit den Inhalten. Indem überflüssige Elemente entfernt und Schriftarten, Größen und Farben wirksam eingesetzt werden, gelangen die Inhalte leichter in den Vordergrund. In diesem Beispiel sind die Namen und Titel besser zu lesen.

Inhalt im Vordergrund	Ablenkende Spielereien

Geben Sie Inhalten Luft zum Atmen

Relevante Befehle und Funktionen sind gut zu sehen und zu verstehen, und Benutzer können leicht damit interagieren.

Zusammenfassung und Prüfliste

• Seien Sie in einer Sache richtig gut, anstatt in vielen Dingen mittelmäßig.
• Inhalt ist wichtiger als Spielereien.
• Seien Sie visuell fokussiert und direkt. Lassen Sie die Benutzer in die Dinge eintauchen, die sie mögen, dann werden sie den Rest von selbst finden.
• Wecken Sie Vertrauen bei den Benutzern.
• Vermeiden Sie Redundanz in Ihrer UI.

Schnell und flüssig

Dieses Prinzip gewährleistet, dass Inhalte faszinierend und reaktionsschnell sind. Es stellt die Grundlage für ansprechende Animationen, Übergänge und Reaktionen dar, die von Benutzern nicht unbedingt erwartet werden, die Oberfläche jedoch zum Leben erwecken und gern angenommen werden. Menschen und Aufgaben erhalten Vorrang vor der Technologie.

Wenn Ihre App für einen Tablet PC oder ein Smartphone bestimmt ist, sollten Sie berücksichtigen, dass bei Apps für die Nutzung unterwegs einfache und schnelle Szenarien im Mittelpunkt stehen sollten. Wenn Sie sich hierbei darauf konzentrieren, für Benutzer schnell und zielgerichtet die gewünschten Inhalte bereitzustellen, sind Sie auf einem guten Weg zu einem hervorragenden Design.

Nutzen von Live-Inhalten

Live-Kacheln ermöglichen schnelle Reaktionen und sind dynamisch und mitreißend. Außerdem können sie auf vielerlei Weise die Fantasie beflügeln – von der Benachrichtigung über eine neue E-Mail bis hin zu Insidertipps für Getränkeangebote in Ihrer Lieblingsbar.

Bewegung

Vermitteln Sie ein Gefühl von Kontinuität, und lassen Sie die App durch den Einsatz aussagekräftiger Animationen eine Geschichte erzählen. Anhand von Bewegung können Benutzer zum Initiieren einer Aktion aufgefordert werden oder unterschiedliche Arten von Aktionen unterscheiden. Wenn Sie auf den Sperrbildschirm tippen, wird durch eine Bewegung angezeigt, dass Sie ihn nach oben schieben können. Mit dem Ausblendübergang eines Elements wird angegeben, wie es mit einer Wischbewegung wieder eingeblendet werden kann.

Zusammenfassung und Prüfliste

• Reagieren Sie schnell auf Benutzerinteraktionen, und seien Sie für die nächste Interaktion bereit.
• Designen Sie für die Toucheingabe und direkte Interaktion.
• Beigeistern Sie Ihre Benutzer durch Animationen.
• Sorgen Sie für reibungslose Übergänge zwischen Abläufen.

Wirklich digital

Bei diesem Prinzip geht es um die grenzenlosen Innovationsmöglichkeiten der digitalen Welt. Beim Skeuomorphismus werden die Regeln und Eigenschaften der realen Welt auf die Designmetaphern angewendet. Wir nutzen jedoch die Kraft, Sprache und einzigartigen Möglichkeiten unseres Mediums.

Genauso wie in der Designschule Bauhaus die Beseitigung überflüssiger Designelemente gelehrt wurde, ermutigen auch wir im Rahmen dieses Prinzips zu Designs, bei denen auf die Anlehnung an die wirkliche Welt, z. B. durch Leder- oder Textureffekte, Stiche, Schatten und Reflexionen, verzichtet wird. Setzen Sie eine noch leistungsfähigere und stärker skalierbare Designsprache ein. Dies ist die Grundlage des Prinzips "Wirklich digital".

Informationen sind "in"

Verwenden Sie Infografiken und nicht nur Symbole. Das Hauptziel ist hierbei die Bereitstellung von Informationen, und die Erreichung dieses Ziel sollte nicht durch unnötige Details beeinträchtigt werden. Die Nutzung von Infografiken sorgt für klarere Inhalte, verwertbare Informationen und keinerlei Ablenkung.

Symbole	Infografiken

Zusammenfassung und Prüfliste

• Seien Sie dynamisch und lebendig durch Kommunikation.
• Achten Sie auf eine schöne Typografie.
• Verwenden Sie kräftige, lebendige Farben.
• Stellen Sie eine Verbindung mit der Cloud her, damit Ihre Benutzer stets miteinander verbunden sein können.

Gemeinsam gewinnen

Bei diesem Prinzip geht es um die Zusammenfassung Ihrer Arbeit, indem Sie sie so weit wie möglich in das allgemeine Ökosystem integrieren und innovative Neuerungen einbauen, wo dies erforderlich ist. Gestalten Sie Ihre Umgebung so, dass Apps und Benutzerszenarien auf unterschiedlichen Plattformen wie eine vertraute Oberfläche und eine Marke wahrgenommen werden. Benutzer mögen Vertrautheit und möchten nicht für jede neue Oberfläche, mit der sie interagieren, neue Vorgehensweisen erlernen. Nutzen Sie daher die gängige Plattform der Software und Dienste von Microsoft. Bauen Sie Ihre Benutzeroberflächen auf etablierten und häufig verwendeten Steuerelementen, Gesten, Interaktionsmustern, Animationen und sogar auf allgemein anerkannten Cloud-Diensten für die Authentifizierung und Speicherung auf.

Anders ausgedrückt: Versuchen Sie nicht, das Rad neu zu erfinden. Innovationen sind eine tolle Sache, aber nicht auf Kosten der Benutzeroberfläche. Mit jeder App wird außerdem ein bestimmter Ton – sozusagen die Persönlichkeit der App – vermittelt, der beim Benutzer haften bleibt. Informieren Sie sich darüber, wie wir das Thema der Ansprache von Benutzern angehen, und machen Sie sich Gedanken darüber, wie Sie dies in Ihrer App handhaben möchten. Finden Sie heraus, was für Ihre App funktioniert, und zögern Sie nicht nachzuahmen, was sich als effektiv bewährt hat.

Ausrichtung auf Plattformen

Überlegen Sie, wie Ihre App sich am besten in das Ökosystem der Geräte und Formfaktoren von Microsoft einfügt. Stellen Sie sich die Frage "Wofür ist dieses Gerät am besten geeignet?", und optimieren Sie die Benutzeroberfläche gemäß den jeweiligen Stärken. Wenn Sie mehrere Plattformen ansprechen, können sich für Sie sogar Szenarien ergeben, die bei der Erstellung für eine Plattform allein nicht möglich wären.

Zusammenfassung und Prüfliste

• Nutzen Sie das UI-Modell.
• Arbeiten Sie mit anderen Apps, um Szenarien zu erstellen, indem Sie an App-Verträgen teilnehmen.
• Verwenden Sie unsere Tools und Vorlagen, um die Konsistenz zu fördern.

Die Prinzipien guten Designs gelten unabhängig von der visuellen Darstellung Ihrer Marke. Auf Prinzipien basierende Designs führen zu Oberflächen, die Benutzer mögen und gern nutzen.

Verwandte Themen

Planen von Windows Store-Apps

Navigationsdesign für Windows Store-Apps

Steuerungsdesign für Windows Store-Apps

Design für Interaktion per Toucheingabe

Richtlinien für die UX von Windows Store-Apps

Erstellen großartiger Windows Store-Apps

Barrierefreiheit für Windows Store-Apps

Prinzipien und Sprache: eine unabhängige Ansicht