Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Gastvorlesung - Mobile Usability

Gastvorlesung - Mobile Usability

Gastvorlesung Beuth Hochschule Berlin, 10. Juni 2014

Michal Gralak

June 10, 2014
Tweet

More Decks by Michal Gralak

Other Decks in Education

Transcript

  1. Inhalt • Einsatz-Szenarien ! • Skeuomorphismus VS flat ! •

    Fehlermeldungen & Notifications ! • Fazit
  2. Inhalt • Anschliessend: Workshop ! • Anwendung von: ! •

    Inhalten aus diesem Vortrag • Inhalten aus HCI ! • Gemeinsame Analyse 5
  3. Vorstellung • Michal Gralak ! • B.Sc. in Medieninformatik !

    • App-Entwicklung seit 2009 ! • Apps für Hardware/Accessories ! • GF, Beratung / Konzept / Entwurf
  4. schöngeist • Gründung am 1. Februar 2013 ! • 2

    Gründer (1,5 Beuth Veteranen) ! • Auftragsarbeiten & eigene Produkte ! • starkes Backend - starke Apps
  5. Kurzer Einstieg • Großes Thema ! • Zu viele Inhalte

    ! • Kinderschuhe ! • Kinderkrankheiten
  6. Kurzer Einstieg • Mobile Sektor stetige Veränderung ! • Microsoft

    Surface Tisch ! • iPhone ! • Apps – web - nativ ! • iPad
  7. Sie sind überall • Kino, Restaurant, Uni, … ! •

    Hoch entwickelte Technologie & 3G ! • Beruf & Alltag vermischen sich mobil ! • Telefonieren nebensächlich
  8. Desktop vs mobile • Eingabemöglichkeiten • Smartphone und Tablet !

    • Input an einer Stelle • Keyboard, Maus und Joypad „virtuell“ • An einer Stelle – dem Screen ! • Windows 8 • Versucht eine Gratwanderung • Funktioniert es?
  9. Screendimensionen • Devices • Smartphone • Tablet ! • Screens

    • 3-6“ Smartphones • 7-12“ Tablets ! • Resolution • (feste) Auflösungen jenseits Retina
  10. Orientation • Portrait • meist bei Smartphone Apps ! •

    Landscape • geeigneter für Tablet Apps
  11. Orientation - Portrait • Vorteile • Stört nicht den Lesefluss

    • Abbilden von realen Objekten (Blatt Papier, Buch…) ! • Für kleine Smartphones erste Wahl ! • Einige Apps machen nur in Portrait Sinn
  12. Orientation - Portrait • Nachteile • Eingeschränkte Darstellung • Nutzen

    der Bildschirm-Tastatur ! • Einige Apps machen nur in Portrait Sinn
  13. Orientation - Landscape • Landscape Vorteile • Abbilden von realen

    Objekten (Terminals…) • „natürliche“ Sehgewohnheit (Blickwinkel) • Bücher… auch hier! ! • Zum „Arbeiten“ ideal ! • Einige Apps machen nur in Landscape Sinn
  14. Orientation - Landscape • Nachteile • unhandlich (schwerer Arm…) •

    Anordnung der Hardware-Buttons ! • Einige Apps machen nur in Landscape Sinn
  15. Usertypen • Einhänder • Smartphone ! • Zweihänder • Smartphones

    • Tablets ! • Cradled User • Smartphones • Tablets
  16. Usertypen • Consumer • Konsumieren Inhalte • Möchten optisch ansprechende

    Funktionen ! • Business • Bearbeiten Inhalte • Schnelle Funktionen
  17. Beispiel-Szenario Messe • Vertriebs App • Schnell bedienbar • Nicht

    überladen • Wenig Felder (ggfs. aus dem Kopf nachtragen) • Unkomplizerte Synchronisation (Abschluss) ! • Schulung vertretbar ! • Spezielle Usergruppe
  18. Beispiel-Szenario Messe • Messe Umfrage • Kann etwas länger dauern

    • Wenig Schulungsaufwand • Muss nicht immer abgeschlossen sein ! • Mitarbeiter Fluktuation ! • Wenig Schulungsaufwand ! • Wenig potentielle Fehlerquellen
  19. iOS • UITabBarController • Bis zu fünf schnell erreichbare Fenster

    • Können weitere Navigationen beinhalten • Oft ideale Lösung - gibts NICHT für Android
  20. iOS • Dashboard • Android / Google Erfindung • Stirbt

    Gottseidank aus • Kaskadierung von Navigationselementen • Kein Mehrwert gegenüber TabBar • Unübersichtlich ! • Wurde ersetzt durch:
  21. iOS • Sidebar / Hidden Navigation • Vgl Navigation Drawer

    (Google…) • „Unübersichtlich“ • Besser als Dashboard • Anzahl Funktionen überdenken • Zu wenige schlecht • Zu viele schlecht
  22. Android • Navigation Drawer • Oft Standard bei Google Apps

    • „versteckte“ Seitenleiste mit Menü • Kann Bilder enthalten (g+ App)
  23. Android • Back Button • soft key • je nach

    Gerät links oder rechts unten • navigiert nicht immer einen Punkt im Stack zurück • back ≠ up
  24. Android • Up Button • Navigiert nicht einen Punkt im

    Stack zurück • Geht immer in den Überordner zurück • Nicht zu verwechseln mit iOS back-Funktion ! • Teil der Android Action-Bar
  25. Skeuomorphismus • „Nachmachen“ echter Objekte • Aufwändig • Abstraktion hilfreich

    ! • Kann kitschig wirken • Game Center iOS 6 - Gambling Table ! • Unterschiedliche Typografie • Oft mit Serifen • (Vermeintlich) passende Schriftarten
  26. Skeuomorphismus • Verfechter: Apple • bis iOS 7 ! •

    Abwärtstrend bemerkbar • Flat ist modern ! • Es hat auch seine Vorteile • vor allem für ältere User
  27. flat design • Reduzieren auf das Wesentliche • Inhalte im

    Vordergrund • Klare Linien ! • Etwas verwirrend • Buttons ohne klare Linie • Button? Label? ! • Schlichte Typografie • Durchgängig • kühl
  28. flat design • Verfechter: Microsoft • Android (viele Köche…) •

    Google! ! • Nicht nur mobile • Windows 8 ! • Derzeit ein „Muss“ • Absoluter Trend • Fragwürdig?
  29. Fehlermeldungen ! ! ! „If an error is possible someone

    will make it.“ ! - Donald Norman, The Design of Everyday Things
  30. Fehlermeldungen • Fehlermeldungen bei wichtigen Ereignissen ! • User informieren

    - nicht nerven ! • Nicht entschuldigen - Fehler passieren • besser: Hilfe zur Fehlerbehebung geben ! • Noch Besser: Fehler vermeiden so gut es geht (QA)
  31. Notifications • Locale Notifications - von der App ! •

    Push Notifications - Server • keine garantierte Zustellung ! • Als Popup, Banner oder im Notification Center ! • Sollten nicht zu viel Text beinhalten
  32. Notifications • Auch hier: User informieren - nicht nerven !

    • Werbung vermeiden (Apple HIG beachten!) ! • Nicht den User zum Nutzen der App auffordern • Beispiel: Mr Flap - „chiep chiep“
  33. Goldene Regeln • Fokus liegt auf Inhalten • aufbereiten •

    aufteilen ! • Komplexität reduzieren • Nutzungsdauer beachten • Eine App für ein Problem! ! • App ≠ Webseite • Inhalte beachten
  34. Goldene Regeln • Bewährtes Nutzen • Wiederverwendung • Installierte Apps

    analysieren ! • Bordmittel verwenden • vom Hersteller erforscht • sinnvoll • einfache Implementierung ! • Aufhübschen • Auge isst mit
  35. Goldene Regeln • Eye Candy führt nicht immer zum Erfolg

    ! • iOS 7 • Teilweise unlesbar • System ruckelig • Aber... sieht super aus! ! • Aufmerksamkeit erzeugt man nicht durch Blaulicht
  36. Goldene Regeln • UI Trends hinterfragen ! • Neue Trends

    immer testen ! • Neue Trends immer zweimal testen
  37. ! ! ! [email protected] ! www.schoengeist.net! ! ! ! schöngeist

    UG (haftungsbeschränkt) Lagesche Str. 15 E 32657 Lemgo Vielen Dank! Und bei Rückfragen: