UX Erlebnisse am Frontend

Transkript

1 creating brand experience

2 ALM Testing UX Erlebnisse am Frontend NOSE Industrial Design

3 Agenda 1. UI Design 2. UX Design 3. Design folgt Regeln 4. Design macht Marken 5. Design definiert Regeln 6. Design kann man (also) testen 7. Design Testen UI Testen NOSE Industrial Design

4 UI Design ist NOSE Industrial Design

5 , wenn es sich an der realen Welt orientiert! NOSE Industrial Design

6 NOSE Industrial Design

7 reduziert: es kommt mit wenigen Elementen aus! NOSE Industrial Design

8 NOSE Industrial Design

9 das Ergebnis von Optimierungen NOSE Industrial Design

10 NOSE Industrial Design

11 NOSE Industrial Design Design NOSE Industrial Design

12 Design ist emotional NOSE Industrial Design

13 NOSE Industrial Design

14 Design ist funktional NOSE Industrial Design

15 Zum Beispiel: «Balkon» NOSE Industrial Design

16 NOSE Industrial Design

17 NOSE Industrial Design

18 Funktionale Software NOSE Industrial Design

19 NOSE Industrial Design

20 wget -r --tries=10 -o log NOSE Industrial Design

21 NOSE Industrial Design

22 NOSE Industrial Design

23 NOSE Industrial Design

24 NOSE Industrial Design

25 NOSE Industrial Design

26 NOSE Industrial Design

27 NOSE Industrial Design

28 Carelman s teapot NOSE Industrial Design

29 Dieter Rams sagt NOSE Industrial Design

30 Dieter Rams, 1995 Gutes Design ist innovativ. Gutes Design macht ein Produkt brauchbar. Gutes Design ist ästhetisch. Gutes Design macht ein Produkt verständlich. Gutes Design ist unaufdringlich. Gutes Design ist ehrlich. Gutes Design ist langlebig. Gutes Design ist konsequent bis ins letzte Detail. Gutes Design ist umweltfreundlich. Gutes Design ist so wenig Design wie möglich. NOSE Industrial Design

31 NOSE Industrial Design

32 Great Software! NOSE Industrial Design

33 Apple Human Interface Guidelines (Mobile) Aesthetic Integrity Consistency Direct Manipulation Feedback Metaphors User Control NOSE Industrial Design

34 NOSE Industrial Design

35 Microsoft Design principles Pride in craftsmanship Be fast and fluid Authentically digital Do more with less Win as one NOSE Industrial Design

36 Microsoft Design principles NOSE Industrial Design

37 Google Design principles 1. Focus on people, their lives, their work, their dreams. 2. Every millisecond counts. 3. Simplicity is powerful. 4. Engage beginners and attract experts. 5. Dare to innovate. 6. Design for the world. 7. Plan for today s and tomorrow s business. 8. Delight the eye without distracting the mind. 9. Be worthy of people s trust. 10. Add a human touch. NOSE Industrial Design

38

39 Wie entsteht also UI Design und UX? NOSE Industrial Design

40 UX wirkt Differenzierend Design macht Werte, Ideen oder Haltungen erlebbar. Die Träger von Design sind Touchpoints: Gestaltete Erlebnisse, mit denen wir in Berührung kommen. NOSE Industrial Design

41 Von der intuitiven Benutzung zu einem Markenerlebnis Die Erlebnispyramide Brand Experience Brand Experience Wenn dieses positive Erlebnis mit der Marke in Verbindung gebracht wird User Experience User Experience Das Ergebnis intuitiver Bedienbarkeit und persönlichen Nutzens Usability Usability Grundlage jedes guten Webauftrittes muss eine tadellose Usability sein. 41

42 Gute Beispiele: Outlook vs. Mail Calendar vs. Outlook NeTS vs. RCS NOSE Industrial Design

43 Interaction Design User Centered Design User Brand Business Tech 43

44 Interaction Design User Centered Design User Business Scenarios Personas Wireframes Visual Design UI Tests Styleguide Pattern Library Prototype Brand Tech 44

45 Interaction Design Entwicklungsphasen Research Vision Implementierung Sprints Weitere Releases User Tests [Gleich viele Eier pro Abschnitt]

46 Praxis UX Qualität NOSE Industrial Design

47 Konsistenz Qualität entsteht im Prozess NOSE Industrial Design

48 User Experience We play SCRUM Vision Development Launch Wir entwickeln eine tragfähige Vision mit dem Product Owner. Wir bestreiten die Sprints als Teil des Entwicklungsteams. Neben der eigentlichen Entwicklungsarbeit engagieren wir uns für Dokumentation, Schulung und Kommunikation/Marketing etc. des Produkts. Die Ausprägung unserer Aktivitäten hängt von Grösse, Umfang und Komplexität des Projektes ab 48

49 User Experience Design Framework Ein Design Framework bildet die Schnittstelle zwischen Kreation und Implementierung der GUIs. GUI Es stellt Konsistenz von Visualität und Abläufen sicher und ist ein starker Hebel für Brand Governance. Design Framework System 49

50 Design Framework Klassischer Styleguide 50

51 Design Framework HTML Snippet Library 51

52 swiss com scrapbook

53 Metrics Driven Design NOSE Industrial Design

54 uess-the-outcome-of-15-ab-tests NOSE Industrial Design

55 NOSE Industrial Design

56 NOSE Industrial Design

57 NOSE Industrial Design

58 NOSE Industrial Design

59 Usability Testing, User Testing NOSE Industrial Design

60 User Testing Wenn sie Aussagen zum Erlebnis wollen, müssen sie danach fragen. Nicht nur zählen beim Test. NOSE Industrial Design

61 Wie geht Usability Testing? Einfach Nutzer beobachten, wie sie ein System bedienen NOSE Industrial Design

62 NOSE Industrial Design

63 NOSE Industrial Design

64 NOSE Industrial Design

65 Vielen Dank