Schlagwort-Archiv: Metro UI

#bldwin: Design differences between iOS and Windows Store Apps

Bart Claeys (Creative Director, ratio interactive) hat in seinem Vortrag anhand der App iCookbook die gestalterischen Unterschiede zwischen aktuellen iOS-App (nicht iOS 7) und Windows 8 Apps gezeigt. Ziel des Vortrages war es anhand eines Beispiels die praktische Anwendung der aktuellen Microsoft Designprinzipien zu zeigen.

WP_20130628_006

Darüberhinaus hat er gezeigt, wie aus dem Skeumorphic-Design einer iOS-App Schritt für Schritt eine ModernUI-Design Win8-App wird. Details zum Vortrag könnt auch Ihr als Fallstudie unter windowsstore.com/designers nachlesen.

Außerdem hat er ein paar Beispiele für Apps im Modern UI-Style gezeigt, um die Flexibilität der Designprinzipien zu zeigen:

Foursquare
WP_20130628_007

Nature Space
Lomogram_2013-06-28_11-25-37-AM

Nasdaq
Lomogram_2013-06-28_11-29-56-AM

Parents
Lomogram_2013-06-28_11-30-42-AM

#bldwin: Designing and Building Windows User Interfaces

Moneta Ho Kushner und Paul Gusmorino von Microsoft begannen ihren Vortrag über die Oberflächengestaltung von Windows Anwendungen mit der Aufforderung:

Know the standards, but do what it takes to build a great app.

Zu unterstreichen damit die Veränderungen, die bereits in der Keynote sichtbar waren. Microsoft lockert offensichtlich seinen strikten Umgang mit den Modern UI Designregeln und verlagert sein wachsames Auge mehr auf die Einhaltung der grundlegenden Designprinzipien.

Lomogram_2013-06-27_02-22-22-PM

Sie versuchten dem weitverbreiteten Verständnis, dass das Modern UI bzw. der Metro-Style von Windows 8 nur aus Kacheln besteht, zu begegnen. Sie zeigten anhand von wenigen Beispielen, wie sich mit den Modern UI Designmerkmalen (Grid, Typographie, Bewegung und Farbe) schicke Oberflächen erzeugen lassen.

Darüberhinaus sind sie auf die Veränderungen UI Patterns eingegangen:

  • Es gibt ein neues Hub-Pattern, welches einen flexiblerem Umgang mit dem Layoutgrid ermöglichen soll.
  • Das neue Navigationbar-Pattern bietet etwas mehr Gestaltungsfreiraum.
  • Suche-Eingabefelder dürfen nun auch direkt auf Bedienoberflächen platziert werden. Die In-App-Suche muss nicht mehr zwingend über das Suchen-Charm erfolgen.
  • Ausserdem wurden einige bestehende Pattern hinsichtlich Flexibilität und Funktionalität angepasst.

bldwin – Mein Fazit zur Konferenz und Windows 8 Metro Style


Quelle: build windows

Die Build windows 2011 hat sich richtig gelohnt. Nein, nicht wegen des Tablets, sondern wegen der geballten Ladung Neuigkeiten rund um Windows 8 und Metro-Style sowie den Hintergrundinformationen, die man nur direkt vor Ort erhält. Am beeindruckendsten fand ich, dass das Unternehmen, dass noch vor ein paar Jahren mit technologiegetriebenen Oberflächendesigns wie diesem hier im Markt auftrat:


Microsoft Outlook auf Windows XP

sich nun mit Leib und Seele einem einfachen, hoch ästhetischen und interaktiv anregenden User Interface Design verschrieben hat. Und dabei sogar soweit geht, für alle digitalen Produkte seines Ökosystems eine einheitliche Designsprache einzuführen. Das es Microsoft mit dem neuen Design-Denken ernst meint, war auch daran zu erkennen, dass sie den Themen Design und User Experience relativ viel Raum auf der Techniker-Konferenz eingeräumt haben. Die Konferenz hatte übrigens ca. 5.000 Teilnehmer.


Microsofts Neue Designsprache

Inspirationen für Metro-Style (Screenshot aus dem Vortrag)

Allerdings existieren für die Designsprache „Metro“ aktuell nur die Designprinzipien, die Umsetzung fürs Phone 7 sowie erste Ansätze für Windows 8. Auch wenn der Metro-Style Teil von Windows 8 auf den ersten Blick begeisternd ist, so ist er doch aktuell nur auf ein paar wenige und einfache Anwendungsfälle ausgelegt. Sobald man etwas vom vorgesehenen Pfad abkommt oder nicht vorgesehen Aufgaben erledigen will, wie z.B. die Erstellung von Screenshots, dann muss man wieder über den „Classic“-Mode gehen. Aber ist ja immer noch eine Developer Preview und dafür schon richtig gut. Bleibt abzuwarten, wie es sich dann in den folgenden Beta- und RC-Versionen weiterentwickeln wird.
Weitere Ansätze die neue Designsprache zu übernehmen kann man aktuell schon bei XBox und einigen wenigen Entwicklerwerkzeugen, z.B. dem neuen Team Foundation Server sehen. Es wird nun spannend, welche der vielen Microsoft Produktgruppen in den nächsten Monaten Metro-Style Apps oder an Metro angelehnten Desktop-Applikationen vorstellen werden.


TFS Preview Zoom

Gedanken zu den Metro-Style Apps

Noch während der Konferenz wurde bekannt, dass man in der Developer Preview diese große Neuerung abschalten kann. Das ist natürlich aus Sicht der Erwartungskonformität ganz gut, weil so alles beim alten bleiben kann und es dadurch keine Umstiegshürde gibt.
Aus Sicht der Zukunftsperspektiven von Microsoft und den Unternehmen, die mit Windows-basierten Werkzeugen Geld verdienen wollen, ist das sehr schlecht. Microsoft entwickelte mit Windows bisher ein Betriebssystem für ein Computer-Gattung, die es in der Form in Zukunft nicht mehr geben wird. Das aktuelle Desktop-Oberflächendesign ist jedoch stark an dieses Gerät und seine Eingabemöglichkeiten gebunden. Mit Metro eröffnet sich Microsoft einen Zugang zu den vielen Computerformen und Eingabegeräten, die wir in den nächsten Jahren erleben werden. Außerdem greift Metro die Grundübel der IT-Branche an: hässliche und überladene Bedienoberflächen sowie komplizierte und unverständliche Bedienabläufe. Damit leistet Metro einen wichtigen Dienst für alle Beteiligten, die mit der Windows Plattform Geld verdienen wollen. Denn was bringt die funktional umfangreichste Windows App, wenn die meisten Anwender auf Google oder Apple setzten, weil es einfach einfacher ist.

Touch

Ich denke, dass die Verbreitung von Touch-PCs zum Zeitpunkt der Freigabe von Windows 8 einen maßgeblichen Einfluss auf den Erfolg von Metro haben wird. Metro fokussiert auf die Touch-Bedienung und ist für eine Zeit gemacht, in der es mehr Touch-als Maus-Tastatur-Geräte gibt. Allerdings gibt es da akutell ein Henne-Ei-Problem. Erforlgreiche Touchgeräte, wie z.B. das iPad oder das Galaxy Tab, haben ein touchoptimiertes Betriebssystem. Im Windowsbereich gibt es das heute nicht, was natürlich den Absatz von Windows-Tablets nicht gerade beflügelt.
Interessant wird auch, wie die Gerätehersteller auf Touch und das neue Betriebssystem reagieren werden. Es macht schon ziemlichen Spaß mit dem Finger und der Tastatur einen Rechner zu bedienen. Dabei darf nur der Monitor nicht wie eine Wand vor einem stehen, da einem sonst nach kurzer Zeit die Arme schmerzen. Ebenso braucht es eine adäquate Unterstützung von Aufgaben, die eine höhere Genauigkeit benötigen, als sie der Finger bieten kann. Ich kann mir gut vorstellen, dass wir in ein paar Jahren nicht mehr hinter Monitorwänden verschwinden, sondern sich Computer nahtlos in unsere Arbeitsflächen und Nutzungskontexte integrieren und wir mit bewährten Werkzeugen wie Stift, Tastatur, Finger und vielleicht noch der ein oder anderen Maus arbeiten werden. Windows 8 wird dies aus meiner Sicht sogar fördern. Ich glaube, dass in diesem Bereich wieder großes Innovations- und Geschäftspotential für Hersteller von Displays und Computern schlummert.

Was bedeutet Metro für aktuelle Designprojekte

Auf Designprojekte, in denen windowsbasierte Produkte gestalten werden, die in den Jahren 2011 & 2012 vertrieben werden sollen, hat Metro keinen Einfluss. Zu diesem Zeitpunkt ist es unwahrscheinlich, dass Windows 8 schon auf dem Markt ist. Ausgenommen sind natürlich Windows Phone Projekte, hier spielt der Metro-Style schon heute die entscheidende Rolle.
Für mittelfristige Designprojekte von windowsbasierten Desktop-Produkten, die ab 2013 in den Vertrieb gehen sollen, sieht es anders aus. Für diese Projekte macht es jetzt schon Sinn sich mit den Metro-Designprinzipien zu beschäftigen und diese zu adaptieren. Aus meiner Sicht ist es sinnvoll und nicht sofort vollständig auf den Metro-Style umzustellen, sondern die Metro-Designprinzipien im ersten Schritt soweit wie möglich auf die klassischen Desktopanwendungen zu übertragen. Beispielsweise in dem Typographie einen höheren Stellenwert bekommt, die Oberflächen auf das Wesentliche reduziert werden (d.h. wirklich abgespeckt werden) und auf jeglichen visuellen Balast verzichten. Damit würde zum einen der Tatsache Rechnung getragen, dass Windows 8 und damit auch der Metro-Style ein paar Jahre brauchen werden um eine ausreichende Marktdurchdringung zu erreichen. Zum anderen wird WinRT (Windows Runtime), welche die technologische Basis für Metro-Apps bildet, erst mit der Freigabe von Windows 8 einen Zustand erreicht haben, der stabil genug ist um darauf eine verlässliche Produktentwicklung aufzusetzen.
Interessant ist der komplette Metro-Style schon heute für alle windowsbasierten Produkte deren Hauptvertriebskanal touchbasierte Geräte sind und deren Vertrieb ab 2013 starten soll. Für diese Produkte kann sich dies meiner Meinung nach als erfolgsentscheidender Vorteil herausstellen.

Siehe auch

Windows Phone User Experience Design
Build accessible Metro style apps using XAML
Using tiles and notifications
Reaching more customers with accessible Metro style apps using HTML5
Create experiences that span devices
Reach your customers devices with one beautiful HTML5 user interface
Designing Metro style: principles and personality
Windows Server 8, TFS und Azure
8 traits of great Metro style apps
Windows 8: super exciting but a huge design challenge for software developer
bldwin – der Tag vor der Konferenz

bldwin – Windows Phone User Experience Design

In meiner letzten Session auf der Build habe ich mir den Vortrag von Bryan Agnetta vom Windows Phone Team über das UX Design für das Windows Phone angesehen. Er hat über die Entwicklung des UI Designs beim Windows Phone bzw. dem Metro-Style gesprochen und Empfehlungen für die Gestaltung von eigenen Metro-Style Phone Apps gegeben.


Metro Information Architecture (Screenshot aus Vortrag)

So richtig viel Neues war nicht dabei, aber es gab trotzdem ein paar interessante Punkte:
* Der Metro-Style kann um die eigenen gestalterischen Belange, z.B. aus Markensicht, erweitert werden. Er stellt eine Basis – eine Designsprache – und keine Sammlung von strikten bzw. strengen Gestaltungsregeln dar.
* Er hat auch schön plastisch dargestellt, warum und wie dem heutige technologiegetriebene Ansatz in vielen Entwicklungsprojekten ein designgetrieben Prozess vorgeschaltet werden sollte und kann. Dass bedeutet, dass das UI Design einer Applikation konzeptioniert, gestaltet, getestet und fertiggestellt wird, bevor die Entwicklung beginnt.
* Micorosoft hält beim Metro-Style die Fäden viel stärker in der Hand und achtet auf die Usability des gesamten Systems als bisher. Beispielsweise wurde die Möglichkeit, den Hardware-Button für Suche mit einer eigenen In-App-Suche zu verbinden, abgeschaltet, da dadurch die Konsistenz des gesamten Systems negativ beeinflusst wurde.

Siehe auch

Video zum Vortrag
build windows

bldwin – Build accessible Metro style apps using XAML

Alnur Usmail (Program Manager for Metro style apps Microsoft) hat in einem sehr kurzen Impulsvortrag über die Gestaltung von barrierefreien Anwendungen mit XAML gesprochen.
XAML und die entsprechenden Templates in VS2011 bieten für bestimmte Szenarien (z.B. Hochkontrast-Darstellung) standardmäßig eine Unterstützung für barrierefreien Anwendungen. Die Unterstützung basiert auf dem UI Automation Framework. Der Einbau von zusätzlichen Informationen für Unterstützungswerkzeuge, z.B. Screenreader, erfolgt über AutomationPeers und AutomationProperties. Aus meiner Nicht-Technikersicht scheint diese Lösung deutlich aufwendiger zu sein als in HTML5.
Wie ich auch schon im Beitrag zu barrierefreien HTML5-Anwendungen geschrieben habe, können barrierefreie Anwendungen im Windows Store gekennzeichnet werden, so dass sie leichter gefunden werden. Der UI Accessibility Checker (AccChecker) kann auch in XAML verwendet werden um typische Barrierefreiheits-Fehler zu entdecken.
Auch hier ist mein Fazit, dass bei der Entwicklung von XAML-Anwendungen die Anforderungen an die Barrierefreiheit von Anfang an berücksichtigt werden müssen, die Erweiterungen am Programmcode erforderlich sind.

Siehe auch

Video zum Vortrag
build windows

bldwin – Using tiles and notifications

Kip Olson (Partner Development Manager Microsoft) hat in seinem Vortrag über die Live Tiles und Hinweise in Windows 8 gesprochen.

A tile is a doorway to your app. (…) Tiles are more than an icon. It’s an extension to your app.


Tiles der Wetter-App von Win 8

Tiles

Mit Tiles für Windows 8 verfolgt Microsoft folgende Ziele:
Aus Anwendersicht:

* Start ist my space for the apps I love
* Connected to the new things I care about
* Central place where I can confidentily launch or switch to any app
* Engaging and natural

Aus Entwicklersicht:

* Simple to add tile and toast notification support
* Help you be an artist
* Easy to update
* Reach milllions of customers with low cost through live updates

Tiles repräsentieren die Anwendung, ihre Inhalte und Anwendungsfälle. Sie können mit Text, Bildern (JPG, PNG, max. 150 kB), Icons (Badges), Animationen und kräftigen Farben gestaltet werden. Es gibt standardmäßig zwei Größen: Quadrat (1×1) und Rechteck (2×1). Die quadratischen Tiles sind für statische Inhalte gedacht. Die Updates der Tiles können über das lokale System oder über die Cloud erfolgen. Für die Gestaltung von Tiles stellt Microsoft 16 unterschiedliche Templates zur Verfügung. Neben den Tiles gibt es noch sekundäre Tiles. Diese sind dafür gedacht, dass Anwender aus einer Anwendung heraus Informationen oder Funktionen auf die Startseite pinnen können. Die sekundäre Tiles bieten dem Anwender dann die Möglichkeit an eine spezielle Stelle in einer Anwendung zu springen.


Windows 8 Tiles Templates

Toast Notifications

Toast Notifications sind Benachrichtigungen, die in der unteren rechten Ecke des Screens angezeigt werden. Im Gegensatz zu bisher sind diese aber dezenter und angenehmer gestaltet.


Windows 8 Toast Notifications

Die Gestaltungsregeln für Toast Notifications sind denen der Tiles sehr ähnlich. Sie sollen verwendet werden um wichtige Informationen anzuzeigen, die nicht übersehen werden dürfen. Sie können genau wie Tiles über das lokale System oder die Cloud angesteuert werden. Es werden insgesamt 8 Templates angeboten. Toast Notifications sollen nur verwendet werden, wenn eine Anwendung im Hintergrund ist.

Siehe auch

Video zum Vortrag
build windows

bldwin – Reaching more customers with accessible Metro style apps using HTML5

Guy Barker (Senior Software Development Engineer Microsoft) sprach in seinem Vortrag über die Entwicklung von barrierefreien Metro-Style Apps mit HTML5.
Eine Studie von Forrester Research aus dem Jahr 2004 zeigte, dass in den USA 17% der Anwender körperliche Beeinträchtigungen, 40% leichte Beeinträchtigungen (z.B. Fehlsichtigkeiten) und 43% keine Beeinträchtigungen haben. Diese Zahlen unterstreichen die Notwendigkeit von barrierefreien Applikationen deutlich.
Die Industrie-Standards HTML5 und Accessible Rich Internet App (ARIA) bilden eine gute Grundlage für barrierefreie Metro-Style Anwendungen. Mit Hilfe von ARIA können herkömmliche User Interfaces um Informationen für Barrierefreiheit ergänzt werden, z.B. Informationen für Screenreader. Beispielsweise können mit Hilfe von ARIA-Tags zusätzliche Benennungen zu Controls hinzugefügt werden, die es für einen Screenreader-Nutzer einfacher machen durch die Anwendung zu navigieren. Auf diese Informationen kann über das UI Automation API zugegriffen werden.
Die neuen Windows Controls aus dem Windows 8 SDK und Templates für Metro-Style Apps in Visual Studio 11 bringen bereits eine grundlegende Unterstützung für Barrierefreiheit u.a. über ARIA mit, z.B. Unterstützung von Sprachausgabe, Tastatursteuerung und Hochkontrast-Darstellung. Diese Basis kann und sollte bei der Entwicklung um anwendungsspezifische ARIA-Informationen, z.B. zusätzliche Namen für Controls, ergänzt werden.
Für Metro-Style Apps ist die Berücksichtigung von Barrierefreiheit besonders wichtig, da die visuelle Gestaltung drauf abzielt nur die wesentlichen Informationen auf der Oberfläche anzuzeigen und die Gestaltung viel stärker visuell orientiert ist. Das führt dazu, dass beispielsweise Labels zu Eingabefeldern weggelassen werden, wenn sich deren Nutzen visuell erschließen lässt. Dies kann es für Screenreader-Nutzer nahezu unmöglich machen sich vollständig durch eine Anwendung zu navigieren und diese zu verstehen.
Interessante Punkte am Rande:
* Das Win8 Onscreen-Keyboard unterstützt nicht nur einen Klick-Modus, sondern auch einen Hover-Modus mit dem es möglich ist auf einfache Art und Weise die richtige Taste zu finden.
* Mit Hilfe von @media queries können spezielle Bilder für die unterschiedlichen Hochkontrast-Darstellungen des Betriebssystems bereitgestellt werden.
* Das Windows 8 SDK bringt Testwerkzeuge für Barrierefreiheit mit, z.B. UI Accessibility Checker.
* Barrierefreie Anwendungen können im Windows Store explizit gekennzeichnet werden. Über den Windows Store können Entwickler darüber hinaus eine Verbindung zur Barrierefreiheit-Community aufbauen.
Mein Fazit: Trotz der grundlegenden Unterstützung von barrierefreien Anwendung durch Windows 8 ist es notwendig das Thema Barrierefreiheit bei der Entwicklung explizit zu berücksichtigen. Für eine gute Umsetzung der Anforderungen an Barrierfreiheit ist es notwendig den Programmcode zu erweitern.

Siehe auch

Video zum Vortrag
build windows
WAI ARIA