Mobile Brand and Interface Design Case study for Munich Public Transport _Web App Process _Native App Outlook

Transkript

1 Helmut Ness Philipp Oehrlein Fuenfwerken Design AG Mobile Brand and Interface Design Case study for Munich Public Transport _Web App Process _Native App Outlook

2

3

4 Fuenfwerken Design AG / Helmut Ness, UITP 2012

6 Omnigraffle Wireframe Stencils Fuenfwerken Design AG / Helmut Ness, UITP 2012

7 Beschreibung Mod -> Die HL stellt die Frage zur mom ipad 16:20 Deutsche Deutsche Vermögensberatung Wie gut sind Sie momentan versichert? Icon PHV Icon HR Icon Glas Icon UV Icon RS 1.2 Icon KFZ ipad Icon PHV Icon HR 16:20 PM Deutsche Deutsche Vermögensberatung Wie gut sind Sie momentan versichert? Icon Glas Icon UV Icon RS Icon KFZ 1.1 Der Modulscreen 1 enthält eine Icons mit textlicher Beschreibu Koordinatensystem mit Y = Ver 1.2 Die Icons können mit "tap and gekennzeichnetes Koordinaten dem Bereich entnommen word "inaktiven" Icon dargestellt. (Gl in Paket B) % 90% 80% 70% 60% 50% 40% 30% icon 20% 10% 0% PERSÖNLICHE ABSICHERUNG: VERSORGUNGSSITUATION icon INTERAKTIONSLOGIK 1. Durch "tap & drag" wird eine Versicherung in das Koordinatensystem gezogen. 3. Jeder weitere gezogene Baustein ordnet sich rechts daneben an. 100% 0-100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 1.5 0% KFZ x KFZ PERSÖNLICHE ABSICHERUNG: VERSORGUNGSSITUATION icon INTERAKTIONSLOGIK 1. Der Balken kann per "tap & drag" nach oben gezogen werden. Dadurch wird der momentane Grad der "Versicherung" symbolisiert und in Prozent ausgewiesen. 1.3 Das Icon wird an der ersten Ste es baut sich der erste Balken m nach hell dahinter auf. Der Bal unten in Richtung des Koordin ab. (Animation wie beim auffah Koordinatensystems erscheint 1.4 Gleichzeitig erscheint unterhalb Bezeichnung der jeweiligen Ve ein x-button, welcher es dem N Versicherung jeder Zeit zu lösc rücken alle folgenden Versiche zusammenhängendes Diagram 1.5 Durch "tap and drag" wird der A geschoben. Die Fläche des Ba gewünschten %-Wert (in 5 % S Die Anfasser werden mitgesch Balken sichtbar, um den 100% 1.7 Durch "tap" auf den Pfeil nach überblendet. Dabei wird die He ipad 16:20 PM Deutsche Deutsche Vermögensberatung Wie gut sind Sie momentan versichert? ipad 16:20 Deutsche Deutsche Vermögensberatung Wie gut sind Sie momentan versichert? Icon Icon Icon Icon Icon Icon Icon Icon Icon Icon Icon Icon PHV HR Glas UV RS KFZ PHV HR Glas UV RS KFZ 100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0% icon 100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0% % 100% 65% Icon 1.7 KFZ x PERSÖNLICHE ABSICHERUNG: VERSORGUNGSSITUATION KFZ HR PHV RS x x x x PERSÖNLICHE ABSICHERUNG: VERSORGUNGSSITUATION Fuenfwerken Design AG / Helmut Ness, UITP 2012 Übergangsanimation 1. alte Headline und Balken mit Icons ausblenden 2. dann neue Headline einblenden (es sollte keine Überlagerung der beiden Headlines sichtbar sein) 3. nach 2-3 Sec Pause: die %-Werte und der Anfasser blenden aus, die Versicherunglücke wird durch eine farblich differenzierte Fläche illustriert, die sich hinter den Balken von unten nach oben aufbaut. 4. daraufhin blenden die Rest-%-Werte auf der farblich differenzierten Fläche ein. Der fehlende %-Wert wird diesmal aufgezeigt.

10 Deutsche Vermögensberatung ipad App / Schriftstile Schriftstile Content Hierarchie 1 Helvetica Neue Bold 16px / 20px # Schlagschatten 100% Deckkraft #FFFFFF 1px unten 1.2. Content Hierarchie 2 Helvetica Neue Regular 16px / 20px # Schlagschatten 100% Deckkraft #FFFFFF 1px unten 2.1. UI-Element Label Hierarchie 1 Helvetica Neue Bold 18px / 24px # Schlagschatten 100% Deckkraft #FFFFFF 1px unten 2.2. UI-Element Label Hierarchie 2 Helvetica Neue Regular 18px / 24px # Schlagschatten 100% Deckkraft #FFFFFF 1px unten 3.1. Grafik Subline Hierarchie 1 ( Legende) Helvetica Neue Bold 20px / 26px # Schlagschatten 100% Deckkraft #FFFFFF 1px unten 3.2. Grafik Subline Hierarchie 2 ( Legende) Helvetica Neue Bold 18px / 24px # Schlagschatten 100% Deckkraft #FFFFFF 1px unten 3.3. Grafik Subline Hierarchie 3 ( Legende) Helvetica Neue Regular 18px / 24px # Schlagschatten 100% Deckkraft #FFFFFF 1px unten Creator Chris Bleuel / Fuenfwerken Design AG Modified Fri Feb HINWEIS: Ausnahmen bei Limitierung des Layouts durch abzubildende Werte werden im Einzelnen vermerkt. Zur Kennzeichnung werden modulspezifisch Farben aus der Farbpalette eingesetzt Grafik Label Hierarchie 1 ( Dynamische Werte / Label) Helvetica Neue Bold 30px / 40px # Schlagschatten 100% Deckkraft #FFFFFF 1px unten 4.2. Grafik Label Hierarchie 2 Helvetica Neue 1 / 3 Regular 18px / 24px # Schlagschatten 100% Deckkraft #FFFFFF 1px unten Fuenfwerken Design AG / Helmut Ness, UITP 2012

13 Mobile App Wireframe B / Liste Carrier 12:00 PM 5.1 Sort by: in ascending order (Anzahl) Treffer für Kategorie, Format, Suchbegriff 5.0 D) 6.0 Liste Über der Liste befindet sich der Listen-Head, welcher alle Funktionen zur Sortierung des Contents beinhaltet. Grundsätzlich befinden sich Events über den Videos (visuell getrennt > Design) Default: aktuellste Videos oben. Der Listen-Head ist beim Scrollen fixiert. Die Liste scrollt unter dem Head hindurch. > Design. FORMAT DATE img Lorem ipsum dolor sit amet consetetur, sed diam nonumy eirmod tempor invidunt ut ID Element Verhalten img FORMAT DATE Lorem ipsum dolor sit amet consetetur, sed diam nonumy eirmod tempor invidunt ut 6.1 Listen-Head Im Listen-Had sind die Sortierfunktionen, sowie Trefferanzahl und Such bzw. Filterbegriffe enthalten. vgl. Wireframe > Frontend C 1.0 Liste-Head img img FORMAT DATE Lorem ipsum dolor sit amet consetetur, sed diam nonumy eirmod tempor invidunt ut FORMAT DATE Lorem ipsum dolor sit amet consetetur, sed diam nonumy eirmod tempor invidunt ut 6.2 Video-Modul In der Liste werden alle Video-Module dargestellt. Das Bildformat entspricht dem Teaser-Bild > Frontend B Teaser Bild. Die Headline wird komplett mit 85 Zeichen im Modul angezeigt. On Tap wird auf die Detailseite weitergeleitet. > B Video Detail 6.3 Weiter Videos werden geladen Scrollt der Nutzer nach unten werden weitere Videos nachgeladen. Ein Lade-Icon wird angezeigt. Hier gibt es kein "weitere Videos" Button. Müssen Videos nachgeladen werden, wird ein Lade-Icon angezeigt. > Tablet App C Liste FORMAT DATE img Lorem ipsum dolor sit amet consetetur, sed diam nonumy eirmod tempor invidunt ut 5.2 D) 7.0 Liste Quer-Ansicht Wird die Liste im Querformat angezeigt, werden alle Video-Module skaliert > Design. Der Listen-Head bleibt sichtbar StatusBar StatusBar Logo Logo Sort by: FORMAT (Anzahl) Treffer für Kategorie, Format, Suchbegriff in ascending order DATE Sort by: (Anzahl) Treffer für Kategorie, Format, Suchbegriff in ascending order img Lorem ipsum dolor sit amet consetetur, sed diam nonumy eirmod tempor invidunt ut... FORMAT DATE FORMAT DATE img Lorem ipsum dolor sit amet consetetur, sed diam nonumy eirmod tempor invidunt ut Bouncing in Scrollview - am Ende einer Liste img Lorem ipsum dolor sit amet consetetur, sed diam nonumy eirmod tempor invidunt ut... FORMAT Menü Menü Creator Modified Chris Bleuel / Fuenfwerken Design AG Fri Nov Fuenfwerken Design AG / Helmut Ness, UITP 2012

16 Munich Underground Service 351 million passengers each year 582 carriages 94 stations 93 km-long network 6 lines Munich Bus Service 172 million passengers each year 915 bus stops 379 buses maximum capacity MVG 457 km-long network 66 bus routes, 23 km of bus lanes 9 night routes every week-end N40 every night Fuenfwerken Design AG / Helmut Ness_UITP 2012 /

17 Munich Transport Authority _Branding and Corporate Design _Informationsdesign Fuenfwerken Design AG / Helmut Ness_UITP 2012 /

18 A new legible typeface for informationdesign and branding Fuenfwerken Design AG / Helmut Ness_UITP /

19 Anatomie Illiesweg Illiesweg Illiesweg Fuenfwerken Design AG / Helmut Ness_UITP 2012 /

20 Anatomie Illiesweg Illiesweg Illiesweg Fuenfwerken Design AG / Helmut Ness_UITP 2012 /

21 Prof. Werner Schneider + Helmut Ness / tgm Ortsbesichtigung Licht + Schrift in der Münchner U-Bahn Linotype Vialog

22 Fuenfwerken Design AG / Helmut Ness_UITP 2012 /

24 Fuenfwerken Design AG / Helmut Ness_UITP /

25 Fuenfwerken Design Dienstagsgespräch FH Würzburg 25

27 tgm Ortsbesichtigung Licht und Schrift der Münchner U-Bahn Ingo Maurer Prof. Werner Schneider Helmut Ness

35

36 Fuenfwerken Design AG / Helmut Ness, UITP

37 Zwei Auflösungen: Ein Ansatz. Detailseite px px Fuenfwerken Design AG / Helmut Ness, UITP 2012

38 Navigationsmodule Primär-Contentmodule Sekundär-Contentmodule Fuenfwerken Design AG / Helmut Ness, UITP

39 Fuenfwerken Design AG / Helmut Ness, UITP

41 Mobile Brand and Interface Design Fuenfwerken Design AG Web App: MVG live Preview

42 Mobile Brand and Interface Design Fuenfwerken Design AG Web App: MVG live Preview _Input _Responsive Web Design _Webfonts

43 losing contact. CORE GESTURES them in a clockwise or counterclockwise direction. CORE GESTURES Press Touch surface for extended period of time. NAVIGATING ACTIONS Move to previous/next item in list. NAVIGATING ACTIONS move losing contact. CORE GESTURES Press Touch surface for extended period of time. BASIC ACTIONS Press + tap NAVIGATING ACTIONS Two-handed rotate them in a clockwise or counterclockwise direction. NAVIGATING ACTIONS them in a clockwise or counterclockwise direction. CORE GESTURES Double Tap BASIC ACTIONS Double tap. NAVIGATING ACTIONS Two-handed rotate wise direction. NAVIGATING ACTIONS wise direction. CORE GESTURES Tap BASIC ACTIONS Corner tap NAVIGATING ACTIONS One-handed rotate them in a clockwise or counterclockwise direction. NAVIGATING ACTIONS 3 7 Press + drag losing contact. OBJECT-RELATED ACTIONS Drag (across item or off-screen) losing contact. OBJECT-RELATED ACTIONS Splay them apart. OBJECT-RELATED ACTIONS Spread them apart. NAVIGATING ACTIONS Press + drag losing contact. OBJECT-RELATED ACTIONS Tap (source + destination) Touch object, then touch elsewhere on surface. OBJECT-RELATED ACTIONS Two-handed rotate them in a clockwise or counterclockwise direction. NAVIGATING ACTIONS Double tap. NAVIGATING ACTIONS 1 2 Lasso + cross cross over selected object. 1 OBJECT-RELATED ACTIONS Drag + drop losing contact. OBJECT-RELATED ACTIONS Two-handed rotate wise direction. NAVIGATING ACTIONS Pinch them closer together. NAVIGATING ACTIONS 2 Press + tap, then drag taps other objects, the move selected 1 2 OBJECT-RELATED ACTIONS without losing contact. OR OR OR OBJECT-RELATED ACTIONS One-handed rotate them in a clockwise or counterclockwise direction. NAVIGATING ACTIONS Double tap. NAVIGATING ACTIONS 6 4 Mobile Brand and Interface Design Fuenfwerken Design AG Native App: Design Playground and Toolbox Smartphone Displayauflösung Betriebssystem Apple IiPhone 4G 640 x 940 ios Apple iphone 3GS 320 x 480 ios Blackberry bold x 240 BlackBerry Blackberry Curve 3G x 240 BlackBerry Blackberry Curve x 240 BlackBerry Blackberry Pearl 3G x 400 BlackBerry Blackberry Storm x 360 BlackBerry Blackberry Torch x 480 BlackBerry HCT Mozart 480 x 800 Android HTC 7 Mozart 480 x 800 Windows Phone 7 HTC 7 Pro 480 x 800 Windows Phone 7 HTC 7 Trophy 480 x 800 Windows Phone 7 HTC ChaCha 480 x 320 Android HTC Desire 480 x 800 Android HTC Desire HD 480 x 800 Android HTC Desire Z 480 x 800 Android HTC EVO 3D 540 x 960 Android HTC Gratia 320 x 480 Android HTC HD x 800 Windows Mobile 6.5 Prof. HTC HD x 800 Windows Phone 7 HTC Incredible S 480 x 800 Android HTC Salsa 320 x 480 Android HTC Sensation 540 x 960 Android HTC Smart 240 x 320 Android HTC Wildfire 240 x 320 Android HTC Wildfire S 320 x 480 Android LG E900 Optimus x 800 Windows Phone 7 LG GT 540 Optimus 320 x 480 Android LG P500 Optimus One 320 x 480 Android LG P500 Optimus One 320 x 480 Android LG P920 Optimus 3D 480 x 800 Android LG P970 Optimus Black 480 x 800 Android LG P990 Optimus Speed 480 x 800 Android Motorola Defy 480 x 854 Android Motorola Milestone x 854 Android Nexus S (Samsung) 480 x 800 Android Nokia C x 640 Symbian Nokia C7 360 x 640 Symbian Nokia E6 480 x 640 Symbian Nokia E7 360 x 640 Symbian Nokia N8 360 x 640 Symbian Nokia N x 800 Maemo Nokia X7 360 x 640 Symbian Palm pixi plus 320 x 400 webos Palm Pre 320 x 480 webos Palm Pre plus 320 x 480 webos Samsung Galaxy 3 i x 320 Android Samsung Galaxy x 400 Android Samsung Galaxy S i x 800 Android Press + Drag Rotate Display commands Move through list Press + Drag Change mode Display commands Move through list Rotate Open Display commands Move through list Rotate Select Display commands Move through list Adjust Delete Scale up Adjust view (zoom in) Adjust Duplicate Adjust view (rotate) Adjust view (zoom in) Adjust Move Adjust view (rotate) Adjust view (zoom out) Bundle Move Adjust view (rotate) Adjust view (zoom out) Headline Headline

46 Mobile Brand and Interface Design Fuenfwerken Design AG Native App / MVG Fahrinfo

47 Mobile Brand and Interface Design Fuenfwerken Design AG Native App / MVG Fahrinfo

48 Mobile Brand and Interface Design Fuenfwerken Design AG Brand Look vs. OS Feel Android 4 ios 5

49 Mobile Brand and Interface Design Fuenfwerken Design AG Brand Look vs. OS Feel

50 FINAL SLIDE Conclusion Don`t ignore OS GUI Design Elements and Guidelines (ios / Android ) Webfonts and AppFonts (only ios at this time) transfer Brand Communication and Experience Outlook: Icon Font Solution for Multi Resolution Keep IA and Interactive Interface simple for User/Brand Experience helmut.ness@fuenfwerken.com philipp.oehrlein@fuenfwerken.com