Moderne Apps

Artikel
03/10/2015

Erstellen Sie bessere Benutzeroberflächen mit Live-Kacheln

Rachel Appel Live-Kacheln sind eine effektive Möglichkeit, Ihre App vorzustellen. Sie können Informationen über Ihre App anzeigen, ohne dass ein Benutzer die App selbst starten muss. Als Teil der Benutzeroberfläche der Windows-Plattform sollten Live-Kacheln anziehend und einladend sein und relevante Inhalte anzeigen, auf die zu Klicken sich lohnt.

Live-Kacheln sind Ihre Chance, beim ersten Eindruck zu überzeugen. Der Benutzer schert sich nicht um den Code oder die technischen Details. Alles, was ihn interessiert, ist das Erleben, das ihm Ihre App bietet. Ist sie leicht zu bedienen? Ist sie intuitiv? Diese Dinge sind für den Benutzer wichtiger, als was "unter der Haube" steckt.

Live-Kacheln sind die Auffahrt zu Ihrer App, der erste Eindruck, den Benutzer von der Nützlichkeit Ihrer App erhalten. Jeder, der Ihre App verwendet, sieht und verwendet Ihre Live-Kachel vor jedem anderen Teil der App. Es spielt keine Rolle, ob das zum Starten der App erfolgt oder wegen der ausgewählten Daten, die Sie darin anzeigen. Mit der Live-Kachel können Sie beim alles entscheidenden ersten Eindruck überzeugen.

Das bedeutet, Sie sollten unbedingt darauf achten, dass Ihre Kacheln und der Begrüßungsbildschirm ansprechend und attraktiv sind. Das heißt nicht, dass Sie den Rest der App ignorieren können, Sie kriegen Benutzer aber nie soweit, wenn Sie sie nicht mit ein paar gut aussehenden Kacheln dahin führen. Wie Sie sich wohl vorstellen können, können Sie Live-Kacheln regelmäßig mithilfe von Pushbenachrichtigungen mit neuen Informationen aktualisieren. Sie können sogar Benachrichtigungen bis zum Sperrbildschirm durchleiten, indem Sie Badges zum Anzeigen von appbezogenen Informationen hinzufügen.

Abbildung 1 zeigt die vier Arten von Live-Kacheln an, die auf Windows-Tablets und Desktops verfügbar sind: große, breite, mittlere und kleine. Die Bilder in Abbildung 1 zeigen, wie The Weather Channel größten Wert auf ein aufgeräumtes Design gelegt hat, wenn in den Kacheln keine Informationen angezeigt werden. Sind Informationen anzuzeigen, sehen Sie aufwändige Grafik, und die Kacheln zeigen nur die wichtigsten Informationen an. In diesem Fall sind es das aktuelle Wetter und die Warnung vor schweren Stürmen.

Abbildung 1 Die vier Größen von Live-Kacheln – Groß, Breit, Mittel und Klein

Eine bessere Benutzererfahrung (UX, user experience) führt zu besseren Bewertungen im Store und höherer Zufriedenheit des Benutzers. Live-Kacheln mit Ihrem Branding sind die beste Möglichkeit, Ihre Apps von anderen abzuheben. Abbildung 1 zeigt, wie Kacheln einen Teil einer überzeugenden Benutzererfahrung darstellen können. Die Benutzer müssen die App nicht öffnen, um das aktuelle Wetter anzuzeigen. Auf der großen Hauptkachel können sie bis zu drei Städte einrichten, deren Wetter verfolgt wird, und dann jeweils eine Stadt auf den anderen verfolgen. Das bedeutet, eine ganze Menge Daten auf nur 310 x 310 Pixeln oder einem noch kleineren Spielfeld unterzubringen.

So funktioniert die Grafik von Live-Kacheln

Jetzt, da ich erläutert habe, warum Live-Kacheln wichtig sind, ist es an der Zeit, zu verstehen, wie ihre Grafik funktioniert. Glücklicherweise ist Microsoft mit dem leicht verständlichen, entwicklerfreundlichen UX-Paradigma ein großer Wurf gelungen, dessen Designprinzipien auf Tablets, Smartphones und kleineren Touch-First-Geräten gut funktionieren. Sie können gut aussehende Apps veröffentlichen, für die Sie keinen Designer engagieren müssen. Das heißt nicht, dass Sie Designer gänzlich meiden sollten. Einige Apps, insbesondere Spiele, haben eine komplizierte Grafik für die der Input eines Designers wichtig ist.

Dieser Artikel behandelt einige Designs für Live-Kacheln, die von nicht designgeschulten Entwicklern leicht umgesetzt werden können. Im Rahmen dieser Sammlung von Prinzipien ermöglichen Live-Kacheln den Benutzern, Daten aus Ihrer App zu nutzen, ohne die App zu bedienen. Das ist der Höhepunkt von Bequemlichkeit, da der Benutzer den Startbildschirm seines Geräts schnell mit den Augen überfliegen kann, um auf einen Blick die relevanten Informationen aus mehreren Quellen zu erhalten.

Moderne Apps kennen zwei Arten von Grafik: benutzererstellte und App-Grafik. Die Bilder vom Familienurlaub oder von einem Fotografen werden als benutzererstellt angesehen. Die Bilder innerhalb der Live-Kacheln oder auf der App-Leiste sind App-Grafik. Beim Erstellen von Kacheln können Sie beide Arten verwenden, um Informationen zu übermitteln. Visual Studio enthält Vorlagen, in denen die Grundsätze des modernen Microsoft-Designs berücksichtigt sind und die Ihnen helfen, eine professionelle Darstellung zu verwirklichen. Das bedeutet, dass alles, was Sie benötigen, in der Datei "package.appxmanifest" bereit ist. Sie brauchen lediglich die eigentlichen Grafiken in der richtigen Größe bereitzustellen.

Es ist wichtig, für Kacheln, die noch nicht live sind, das richtige Branding zu verwenden. Wie Sie aus Abbildung 2 ersehen können, haben die Kacheln ein einfaches Design mit einer Sprechblase und den Initialen von "Quote of the Day" (QotD, Zitat des Tages). Die Kachel ist leicht zu finden, und mit ihrem klaren Design und der hellen roten Farbe sieht man sofort, für welche App sie steht. Im Moment ist das eine gewöhnliche, statische Kachel. Das ändert sich, wenn Sie beginnen, Aktualisierungen an sie zu senden.

Abbildung 2 Die Live-Kacheln für die Quote of the Day-App

Die Verwendung von Grafik in einer Windows Store-App oder Windows Phone Store-App erfordert für die verschiedenen Medienobjekte eine Reihe von Bildern:

Live-Kacheln: Die großen oder kleinen Quadrate oder Rechtecke, auf die der Benutzer tippt oder klickt, um eine App zu starten. Diese enthalten häufig Bilder oder Text.
Badges: Kleine Symbole oder Glyphe auf den Live-Kacheln, die den App-Status angeben. Abbildung 1 zeigt sowohl auf den großen als auch auf den kleinen Kacheln einen Badge.
Begrüßungsbildschirm: Der einführende Bildschirm, der unmittelbar vor dem Laden der App angezeigt wird. Dieser Bildschirm enthält oftmals ein Logo oder eine Grafik.
Kacheln innerhalb von Apps: Auf diesen Kacheln werden App-Daten und Live-Daten in einem GridView- oder ListView-Steuerelement angezeigt. Sie sehen wie die Kacheln auf der Windows-Startseite aus und verhalten sich auch so.

Diese Bilder funktionieren am besten mit den Formaten PNG und JPG. Jede Windows Store-App und Windows Phone Store-App kann diese Bildmedienobjekte in vielen verschiedenen Größen enthalten. Sie können konfigurieren, welche Bilder zu welcher Kachel gehören, indem Sie das Paketmanifest des Projekts bearbeiten. Das Paketmanifest ist eine Datei, in der Sie alle App-spezifischen Einstellungen festlegen können, wie etwa den Namen, die Versionsnummer, Grafikmedienobjekte und die Deklaration der Fähigkeiten. Abbildung 3 zeigt die Logos, die Sie in der Datei "package.appxmanifest" in einer Windows Store-App definieren.

Abbildung 3 Konfigurieren der Kachelgrafik in der Datei "package.appxmanifest" einer App

Sie sollten mindestens eine Grafik für jeden der folgenden Medienobjekttypen angeben, sonst zeigt die App stattdessen ihre Standardsymbole an:

Quadratisches 70 x 70-Logo: ein Bild mit 70 x 70 Pixeln
Quadratisches 150 x 150-Logo: Ein Bild mit 150 x 150 Pixeln
Breites 350 x 150-Logo: Ein Bild mit 350 x 150 Pixeln
Quadratisches 310 x 310-Logo: Ein Bild mit 310 x 310 Pixeln
Quadratisches 30 x 30-Logo: Ein Bild mit 30 x 30 Pixeln

Sie können – und sollten – skalierte Grafiken für diese Kachelklassen bereitstellen. Die skalierten Medienobjekte für die Elemente in Abbildung 3 liegen bei 80 Prozent, 100 Prozent, 140 Prozent und 180 Prozent. Unten in Abbildung 3 sind die genauen Abmessungen angegeben, die für diese skalierten Medienobjekte erforderlich sind. Beachten Sie, dass diese Werte nur für Windows Store-Apps gelten. Projekte für Windows Phone Store-Apps weisen etwas andere Sätze von Medienobjekten und Maßstäben auf, die für die kleineren Gerätetypen funktionieren. Sowohl für Windows Store- als auch für Windows Phone Store-Apps gelten die folgenden Konfigurationen für Logos und Begrüßungsbildschirme:

Store-Logo: Das Logo, das im Store angezeigt wird.
Badge-Logo: Ein kleines Symbol, das auf dem Sperrbildschirm oder innerhalb von vorhandenen Kacheln angezeigt wird.
Begrüßungsbildschirm: Eine gesamte Bildschirmseite, die normalerweise ein Logo oder einführenden Text enthält, das bzw. der beim Starten der App angezeigt wird.

Es gibt viele Variationen dieser Bilder, da sie auf den verschiedenen Bildschirmkonfigurationen ordnungsgemäß auf die richtige Größe skaliert werden müssen, vom Desktop zum Mobiltelefon zum Tablet und noch zu anderen. Ein Bild mit 150 x 150 Pixeln darf nicht zu stark gedehnt werden, weil es schnell pixelig und unscharf aussieht.

Sie können Grafiken für Kacheln mithilfe eines beliebigen Bild- oder Grafikbearbeitungsprogramms erstellen. Mit diesen Tools ist es nicht schwierig, wie das in Abbildung 2 zu erstellen, das einfach und doch auffällig ist. Es gibt auch viele Grafiken von der Stange, die Sie in Apps verwenden können.

Programmieren von Kacheln aus Vorlagen

Ohne ihre Fähigkeit, zu verschiedenen Zeitpunkten verschiedene Bilder und Texte anzuzeigen, wären Kacheln kaum mehr als einfache Symbole. Es sind diese regelmäßigen Aktualisierungen, die ihnen ihre Live-Qualität verleihen. Sie können Kacheln mit Code aktualisieren oder sie mit Pushbenachrichtigungen integrieren. Wenn Sie Push verwenden, können Sie Kacheln mit Hintergrundtasks aktivieren, die sich in den Prozesslebenszyklus einfügen. Auf diese Weise muss Ihre App nicht per se ausgeführt werden, trotzdem kann ein Teil des Codes zu vorbestimmten Intervallen ausgeführt werden, um fünf verschiedene Elemente zyklisch zu durchlaufen. Hintergrundinformationen zur Lebenszyklusverwaltung von Prozessen finden Sie unter "The Windows Store App Lifecycle" unter msdn.microsoft.com/magazine/jj660301.

Der Code in Abbildung 4 führt eine einfache Kachelaktualisierung ohne Pushbenachrichtigung aus, um die Kacheln in Abbildung 5 zu erstellen. Er ruft zuerst ein TileUpdater-Objekt durch Aufrufen der statischen "CreateTileUpdaterForApplication" der Klasse "TileUpdateManager" ab. Sobald das geschehen ist, fährt der Code mit dem Abrufen einer vordefinierten Kachelvorlage ab, indem er der Methode "GetTemplateContent" eine der "TileTemplateType"-Enum-Optionen der "TileManager-"Klasse übergibt.

Abbildung 4 Einfache Kachelaktualisierung ohne Pushbenachrichtigungen

var updater = TileUpdateManager.CreateTileUpdaterForApplication();
var square150x150 =
  TileUpdateManager.GetTemplateContent(
    TileTemplateType.TileSquare150x150Text04);
square150x150.GetElementsByTagName("text")[0].InnerText =
  "Only in the darkness can you see the stars. –Dr. Martin Luther King, Jr.";
updater.Update(new TileNotification(square150x150));
var wide310x150 =
  TileUpdateManager.GetTemplateContent(
    TileTemplateType.TileWide310x150SmallImageAndText03);
wide310x150.GetElementsByTagName("text")[0].InnerText =
  "We live in a society exquisitely dependent on science and
  technology, in which hardly anyone knows anything about
  science and technology. - Carl Sagan";
((XmlElement)wide310x150.GetElementsByTagName("image")[0]).SetAttribute("src",
  "ms-appx:///Assets/qotd310x150-sm.png");
updater.Update(new TileNotification(wide310x150));
var large310x310 =
  TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare310x310TextList02);
large310x310.GetElementsByTagName("text")[0].InnerText =
  "Let us pick up our books and our pens, they are the most powerful
  weapons. -Malala Yousafzai";
large310x310.GetElementsByTagName("text")[1].InnerText =
  "Never give up, for that is just the place and time that the tide will turn.
  -Harriet Beecher Stowe";
large310x310.GetElementsByTagName("text")[2].InnerText =
  "I've learned that people will forget what you said, people
  will forget what you did, but people will never forget
  how you made them feel. -Maya Angelou";
updater.Update(new TileNotification(large310x310));

Abbildung 5 Verschiedene der verfügbaren Kachelgrößen

Der Zugriff auf das Attribut "innerText" oder der Aufruf von "SetAttribute" lässt den Code mit der Kachel arbeiten. Das liegt daran, dass eine HTML-Vorlage das Aussehen und Verhalten einer Kachel beschreibt. Glücklicherweise müssen XAML-Entwickler nicht viel HTML lernen, um einfach nur eine Kachel zu erstellen. Schließlich sieht es wie HTML aus. Allerdings sollten Sie Elemente wie den HTML-Code hier kennen, der die TileSquare150x150Text04-Vorlage definiert.

<tile>
  <visual version="2">
    <binding template="TileSquare150x150Text04" >
      <image id="1" src=""/>
      <text id="1"></text>
    </binding>
  </visual>
</tile>

Sie können nicht einfach irgendeine alte Kachel mit ihren mitgebrachten Abmessungen aufwerten, und Sie schreiben den HTML-Code der Vorlage auch nicht selbst. Stattdessen gibt es eine Reihe von Vorlagen, unter denen Sie wählen können, mit denen Sie die grundlegenden Kachelformen, -symbole und -meldungen bearbeiten. Es gibt eine Auflistung dieser Vorlagen sowohl für Windows 8.1 als auch für Windows Phone 8.1, begleitet von Codebeispielen, unter bit.ly/1oqwQd6.

Suchen Sie eine der Vorlagen aus der Liste, und verwenden Sie sie in Ihrem Code. In Abbildung 4 wird diese vordefinierte Vorlage durch den Aufruf von "GetTemplateContent" abgerufen. Sie können unter den zahlreichen verfügbaren Vorlagen wählen.

Bis zu diesem Punkt haben sich die Codebeispiele nur mit dem einfachen einmaligen Aktualisieren einer Kachel an Ort und Stelle befasst, indem etwas Code ausgeführt wurde. Wenn Sie dem ganzen einen gewissen Kick geben möchten, aktualisieren Sie die Kacheln regelmäßig mit neuen Informationen . Sie können dies durch das Hinzufügen von Hintergrundtasks und Pushbenachrichtigungen zu Ihren Apps erreichen. Da der Schwerpunkt dieses Artikels auf der Benutzererfahrung liegt, sollten Sie vielleicht das Video unter bit.ly/1vH6J2p ansehen, um zu erfahren, wie eine Kachel aus einem Hintergrundtask aktualisiert wird.

Verwenden von sekundären Kacheln für eine erstklassige Benutzererfahrung

Benutzer möchten manchmal bestimmte Teile von Informationen an den Startbildschirm anheften. Bordkarten von Fluglinien, ein eBook oder bestimmte Aktiensymbole sind gute Beispiele für die Art von Informationen, die Benutzer an den Bildschirm anheften möchten. Das erledigen Sie in Windows 8.1 oder Windows Phone 8.1 mit sekundären Kacheln. Sekundäre Kacheln erleichtern den Benutzern das Anpassen ihrer Apps, und das überträgt sich in höhere Bewertungen im Store.

Es gibt ein Konzept der tiefen Verknüpfung in der Welt der Apps. Das bedeutet, dass ein Benutzer ein paar Mal innerhalb einer App navigiert und sie dann anheftet, um später eine Verknüpfung dazu zu erstellen. Hier ist eine Reihe von Verwendungen für sekundäre Kacheln:

Wetter für eine bestimmte Stadt
Reiserouten für eine bestimmte Reise
Gespeicherte Spiele
Bestimmte Filme, die vom Start angezeigt oder fortgesetzt werden sollen
Die Kontaktinformationen von Freunden
Ihre Lieblingsbilder
Benutzerdefinierte Alarme

Vergessen Sie nicht, dass diese Kacheln sekundär sind, weil Sie bereits über eine primäre Live-Kachel verfügen. App-weite Aktualisierungen sollten an die primäre Kachel gerichtet sein, allerdings gibt es dazu keine feststehenden Regeln. Die bestimmten Datentypen, die für sekundäre Kacheln aufgelistet sind, hätten in der Hauptkachel wenig Sinn. Benutzer starten normalerweise eine App und navigieren dann zu ihrer Startseite. Mit sekundären Kacheln starten Benutzer eine App und gelangen direkt zu einem bestimmten Teil der App. Der Ausdruck dafür ist "deep linking" (tiefe Verknüpfung). Als Grundregel sollten Sie primäre Kacheln für das Starten zum Startbildschirm der App und sekundäre Kacheln für bestimmte Detaildaten verwenden.

Der folgende Code erstellt eine sekundäre Kachel und zeigt sie an:

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
  string displayName = "Secondary tile";          
  string tileActivationArguments = "Look both ways before crossing the street";
  System.Uri square150x150Logo = 
    new System.Uri("ms-appx:///Assets/Logo.scale-100.png");
  SecondaryTile secondaryTile = new SecondaryTile("Pinned",
    displayName,
    tileActivationArguments,
    square150x150Logo,
    TileSize.Square150x150);
}

Übergeben Sie beim Aufrufen des "SecondaryTile"-Konstruktors alle Informationen, die Sie zum Auffüllen der Kachel benötigen, wie den Namen, die Argumente, die Größe und das zu verwendende Bild. Alles, was Sie brauchen, ist direkt im Aufruf vorhanden, und der Konstruktor ist überladen, daher stehen viele Optionen zur Auswahl.

Sekundäre Kacheln sind Standardkacheln ähnlich, sie ermöglichen aber tiefe Verknüpfungen zu Inhalten oder bestimmten Teilen der App. Je benutzerfreundlicher Sie beide Kachelsätze gestalten, desto besser fallen ihre Bewertungen im Store aus. Erwägen Sie also die Verwendung sekundärer Kacheln, wenn Ihre App spezifische Daten enthält, die anzuzeigen auf der Windows-Startseite nützlich sein kann.

Ein gerader Schluss

Wenn ein Benutzer nichts tun muss, um mit Ihrer App zu interagieren, und trotzdem nützliche Informationen erhält, ist das ein Gewinn. Das schlägt sich in den Bewertungen im App Store nieder. Selbst Entwickler, die nicht allzu weit in Grafikdesign vorgedrungen sind, können trotzdem gut aussehende und nützliche Apps erstellen.

Vergessen Sie nicht, Grafiken für so viele skalierte Größen wie möglich zu erstlelen, dann liefert Windows immer für jedes Gerät die bestmögliche Grafik. Um so besser die Benutzererfahrung, um so besser die Bewertung im App Store. Und das übersetzt sich direkt in mehr Downloads.

Rachel Appel ist Beraterin, Autorin, Mentorin und frühere Microsoft-Mitarbeiterin mit über zwanzigjähriger Erfahrung in der IT-Branche. Sie nimmt an wichtigen Branchenkonferenzen wie Visual Studio Live!, DevConnections und MIX als Rednerin teil. Ihr Fachbereich ist die Entwicklung von Lösungen, bei denen geschäftliche und technologische Aspekte in Einklang gebracht werden und in denen führende Microsoft- und offene Webtechnologien zum Einsatz kommen. Besuchen Sie Rachel Appel auf ihrer Website unter rachelappel.com.

Unser Dank gilt dem folgenden technischen Experten von Microsoft für die Durchsicht dieses Artikels: Frank La Vigne