SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien"

1. ONLINE-AGENTUR & SOFTWAREHAUS

2. MODERNE USER INTERFACES AUF BASIS
AKTUELLER (WEB)TECHNOLOGIEN.

3. EINLEITUNG

4. USER INTERFACES IM
ZEITVERLAUF
das MedienKombinat GmbH =
Seite 4

5. AKTUELLE RAHMENBEDINGUNGEN

6. DIE VIELFALT DER WEBNUTZUNG

7. KOMMENTAR
“Die einen Nutzer kennen sich aus, die
anderen nicht. Der eine surft auf dem iPhone,
der andere mit Riesenbuchstaben. Und die
Webdesigner stehen mittendrin und wollen
auch noch etwas hübsches daraus zaubern!
Kann das gut gehen?“
Gerrit van Aaken, Webentwickler und Blogger
das MedienKombinat GmbH =
Seite 7

8. MOBILE VS. DESKTOP
Quelle:
http://thenextweb.com/mobile/2011/0
1/06
the-great-rise-of-the-mobile-web/
Letzter Zugriff: 07.06.2012
das MedienKombinat GmbH =
Seite 8

9. SICHTEN
 Technologien
 Endgeräte
 Betriebssysteme
 Browser und Browserversionen
 Design-Trends
 SEO-Anforderungen
das MedienKombinat GmbH =
Seite 9

10. NUTZER & NUTZUNGSUMFELDER
 Wir gestalten und entwickeln für Nutzer:
− in verschiedenen Altersstufen
− mit verschiedenen Kompetenzen,
− mit verschiedenen techn. Ausstattungen, Einkommen,
usw.
 Wir gestalten und entwickeln für
Nutzungsumfelder:
− verschiedene Endgeräten, Betriebssysteme,
das MedienKombinat GmbH Seite 10
Bandbreiten
=

11. STUDIE: „DIGITALE GESELLSCHAFT
2011“
Typ 1: Digitale Außenseiter Typ 3: Berufsnutzer Typ 5: Digitale Profis
Typ 2: Gelegenheitsnutzer Typ 4: Trendnutzer Typ 6: Digitale Avantgarde
Quelle: Initiative D21 (2011): "Digitale Gesellschaft 2011", http://www.initiatived21.de/wp-content/uploads/2011/11/Digitale-Gesellschaft_2011.pdf,
zuletzt abgerufen: 11.06.2012 das MedienKombinat GmbH =
Seite 11

12. STUDIE: „DIGITALE GESELLSCHAFT
2011“
 ~26% der Bevölkerung sind „Digitale
Außenseiter“:
− Große Zurückhaltung ggü. technischen Neuheiten
− Sehr eingeschränkten Nutzungsvielfalt
 ~ 28% der Bevölkerung sind
„Gelegenheitsnutzer“:
− Besitzen die wesentlichen Basiskompetenzen
− Bewältigen einfache Textverarbeitungsaufgaben
Quelle: Initiative D21 (2011): "Digitale Gesellschaft 2011", http://www.initiatived21.de/wp-content/uploads/2011/11/Digitale-Gesellschaft_2011.pdf,
zuletzt abgerufen: 11.06.2012 das MedienKombinat GmbH =
Seite 12

13. USABILITY & ACCESSIBILITY

14. UNIVERSELLES DESIGN
„Universelles Design“ [ist] ein Design von Produkten,
Umfeldern,
Programmen und Dienstleistungen in der Weise,
dass sie
von allen Menschen möglichst weitgehend ohne eine
Anpassung
oder ein spezielles Design genutzt werden können.
„Universelles
Quelle: http://www.un.org/Depts/german/uebereinkommen/ar61106-dbgbl.pdf, zuletzt abgerufen: 24.09.2012 das MedienKombinat GmbH =
Seite 14

15. USABILITY
Gebrauchstauglichkeit beschreibt nach DIN EN ISO
9241 das
Ausmaß, in dem ein Produkt durch Benutzer in
einem
Nutzungskontext genutzt werden kann, um Ziele:
 effektiv,
 effizient und
 zufriedenstellend
Quelle: Hellbusch (2005): J. E. Hellbusch, „Barrierefreies Webdesign“, dpunkt, 2005, S. 46 das MedienKombinat GmbH Seite 15
=

16. ACCESSIBILITY
Definition W3C WAI:
“…Web accessibility means that people with
disabilities can
perceive, understand, navigate, and interact with the
Web, and
that they can contribute to the Web.”
“Web accessibility also benefits people without
Quelle: http://www.w3.org/WAI/intro/accessibility.php, zuletzt abgerufen: 10.06.2012 das MedienKombinat GmbH =
Seite 16

17. USABILITY VS. ACCESSIBILITY
Usability: Accessibility:
 Effektiv  Wahrnehmbar
 Effizient  Bedienbar
 Zufriedenstellend  Verständlich
 Robust
das MedienKombinat GmbH =
Seite 17

18. USER INTERFACE DESIGN & WEBENTWICKLUNG
IN DER PRAXIS

19. AUFGABEN
Konzeption Design Technologie
das MedienKombinat GmbH =
Seite 19

20. KONZEPTION
User Centered Design als User Interface Design
Prozess:
 zur Umsetzung interaktiver Systeme
 mit Fokus auf Gebrauchstauglichkeit (Usability)
 mit einem fundierten Set an Methoden und
Techniken
 als iteratives Vorgehen zu verstehen
 setzt interdisziplinäres Verständnis voraus das MedienKombinat GmbH Seite 20
=

21. KONZEPTION
UCD-Phasen:
Analyse Design Evaluation
das MedienKombinat GmbH =
Seite 21

22. KONZEPTION
UCD-Methoden:
Methode Analyse Design Evaluation
Card Sorting X X X
Interviews X
Fokusgruppen X X
Personas X
Usability Tests X X X
Use Cases X
…
das MedienKombinat GmbH =
Seite 22

23. DESIGN
 UCD-Methoden schaffen eine saubere Basis:
− Sitemaps
− Wireframes
− Style Tiles
 Kreationsprozess:
− Kreativität, Projekterfahrung
− UI-Toolkits
das MedienKombinat GmbH =
Seite 23

24. BEISPIEL: SHOWCASES
 CSS MANIA: http://www.cssmania.com/
 CSS BEAUTY: http://www.cssbeauty.com/gallery/
 DESIGN GALLERIA:
http://designgalleria.tumblr.com/
 TAP FANCY: http://tapfancy.com/
das MedienKombinat GmbH =
Seite 24

25. BEISPIEL: TOOLKIT JQUERY
das MedienKombinat GmbH =
Seite 25

26. BEISPIEL: TOOLKIT BACKBASE
das MedienKombinat GmbH =
Seite 26

27. BEISPIEL: TOOLKIT IPAD (RETINA)
das MedienKombinat GmbH =
Seite 27

28. BEISPIEL: TOOLKIT ANDROID
das MedienKombinat GmbH =
Seite 28

29. TECHNOLOGIE
 Web-Applikation
 Mobil-optimierte Website
 Apps
 Responsive Design
das MedienKombinat GmbH =
Seite 29

30. TECHNOLOGIE: WEB-
APPLIKATIONEN
 Web als Infrastruktur, Webbrowser als Client
 W3C Webstandards
 HTML5/CSS3
 Javascript/AJAX
 Frameworks
das MedienKombinat GmbH =
Seite 30

34. TECHNOLOGIE: MOBIL-OPTIMIERTE
WEBSITE
 Auch hier: Web als Infrastruktur, Webbrowser als
Client
 Anpassung einer bestehenden Web-Applikation
für die
mobile Nutzung:
− Optimierung für Displaygrößen mobiler Endgeräte
− Reduzierung des Layouts
− Minimierung von Ladezeiten
das MedienKombinat GmbH =
Seite 34

35. STUDIE
Studie des ECC Handel in Zusammenarbeit mit
PayPal und Shopgate: „Mobile Commerce in
Deutschland – Die Rolle des Smartphones im
Kaufprozess“.
− Konsumenten präferieren den Einkauf via mobil
optimierter Website
− ~41 % der User nutzen lieber Shops, die über
Smartphone-Browser erreichbar sind
das MedienKombinat GmbH =
Seite 35
− Lediglich ~23 % präferieren den Einkauf über eine App

40. TECHNOLOGIE: APPS
 Web Apps:
− Web als Infrastruktur, Webbrowser als Client
− App läd im Browser, nutzt aber spezifische UI
Eigenschaften des Endgeräts und greift ggf. auf
Gerätefunktionen zurück
 Native Apps:
− Nutzung des Betriebssystem des Endgeräts, App als
Client
− Native Nutzung aller Geräteeigenschaften & -funktionen das MedienKombinat GmbH =
Seite 40

41. BEISPIEL: IPAD WEB APP ETERNIT
AG
das MedienKombinat GmbH =
Seite 41

42. BEISPIEL: NATIVE APPS CFC
das MedienKombinat GmbH =
Seite 42

43. RESPONSIVE DESIGN

44. RESPONSIVE DESIGN
Ausgangspunkt:
 Zunehmende Verbreitung internetfähiger mobiler
Endgeräte
 Verschiede Mobile-Betriebssysteme (iOS,
Android, Windows)
 Vielzahl unterschiedlicher Geräte und
Displaygrößen
 Mobile mit eigenen Nutzungskontexten und
Usability-Regeln
das MedienKombinat GmbH =
Seite 44

45. RESPONSIVE DESIGN
Responsive Design
am
Beispiel des CSS-
Frameworks
Foundation*
* Foundation is an easy to use, powerful, and flexible framework for building
prototypes and
production code on any kind of device. (http://foundation.zurb.com/)
das MedienKombinat GmbH =
Seite 45

46. RESPONSIVE DESIGN
Design:
 Rastersysteme, bestehend aus:
− Spalten
− Spaltenzwischenräumen
− Grundlinie
 Klare Linien und Strukturen
das MedienKombinat GmbH =
Seite 46

47. BEISPIEL: GOLDEN GRID SYSTEM
das MedienKombinat GmbH =
Seite 47

48. RESPONSIVE DESIGN
Technologie:
 HTML5 / CSS3
 Media Queries
 Javascript-Touchgesten (Sensa Touch, jQuery
Mobile, usw.)
 Javascript-Fallbacks (Modernizr, usw.)
das MedienKombinat GmbH =
Seite 48

49. RESPONSIVE DESIGN
Media Queries:
 CSS 2: media types
 CSS 3: media queries
 Anstatt nach einem bestimmten Medium zu
schauen, können mit media queries die
Eigenschaften und Fähigkeiten von Geräten und
Ausgabemedien abgefragt werden. Bspw.:
− Breite und Höhe des Browser-Fensters
− Breite und Höhe des Geräts
− Orientierung
− Bildschirmauflösung
das MedienKombinat GmbH =
Seite 49

50. Sony www.sony.com
Barack Obama www.barackobama.com

51. www.webdagene.no

52. Responsive Design
Webfonts Illustrationen

53. FAZIT

54. FAZIT
 Aktuelle Web-Technologien und insbesondere
mobile Endgeräte treiben das User Interface
Design
 Nutzer und Nutzungskontexte sind entscheidend
 Moderne User Interfaces orientieren sich an
altbewährten Designprinzipien (Rastersysteme,
Darstellung von Elementen)
 Vielfältige Frameworks, Toolkits und GUI-
Standards
 Jedes User Interface Design als Projekt das MedienKombinat GmbH Seite 54
=

55. LINKS

56. LINKS
das MedienKombinat GmbH =
Seite 56

57. LINKS
Optimale Gestaltung von Drop-Down-Menus:
Unified Dropdown Menu: One Menu to Rule All Links
http://uxmovement.com/navigation/unified-dropdown-menu-one-menu-
to-rule-all-links/
Wie lassen sich Icons optimal gestalten und optimal
anordnen:
9 Rules to Make Your Icons Clear and Intuitive
http://uxmovement.com/buttons/9-rules-to-make-your-icons-clear-and-
intuitive/ - http://uxmovement.com/buttons/why-distinct-icon-outlines-
help-users-scan-faster/
Wie groß sollten mit dem Finger bedienbare Elemente
(“touch targets”) bei mobilen Anwendungen sein?
Finger-Friendly Design: Ideal Mobile Touch Target Sizes
http://uxmovement.com/buttons/finger-friendly-design-ideal-mobile-
touch-target-sizes/ das MedienKombinat GmbH =
Seite 57

58. LINKS
Das richtige Keyboard für das Ausfüllen von Formularen
auf mobilen Endgeräten:
Input Types: Give Users the Right Keyboard on Mobile Forms
http://uxmovement.com/forms/input-types-give-users-the-right-
keyboard-on-mobile-forms/
Das perfekte Formular füllt der User „gerne“ aus:
Why Users Fill Out Forms Faster with Unified Text Fields
http://uxmovement.com/forms/why-users-fill-out-forms-faster-with-
unified-text-fields/
Login-Formular richtig platzieren:
The Danger of Using Home Page Login Fields
http://uxmovement.com/forms/the-danger-of-using-home-page-login-
fields/
das MedienKombinat GmbH =
Seite 58

59. KONTAKT

60. KONTAKT
das MedienKombinat GmbH
Hauptsitz Chemnitz:
Schönherrstraße 8
09113 Chemnitz
Deutschland
Telefon :+49 (0) 371 356369-0
Fax: +49 (0) 371 356369-29
Dipl.-Kfm. Tim chemnitz@das-medienkombinat.de
Neugebauer
Büro Berlin-Potsdam:
Geschäftsführer / CEO Filmstudios Babelsberg
August-Bebel-Straße 27
14482 Potsdam
E-Mail: tim.neugebauer@das-medienkombinat.de Deutschland
Telefon: +49 331 97996620 Telefon: +49 (0) 331 97996-
Mobil: +49 177 4946559 620
Fax: +49 (0) 331 97996-622
berlin.potsdam@das-
XING: http://www.xing.com/profile/Tim_Neugebauer medienkombinat.de
Web:
www.das-medienkombinat.de
www.twitter.com/medienkombinat
www.facebook.com/medienkombinat
das MedienKombinat GmbH =
Seite 60

61. WWW.DAS-MEDIENKOMBINAT.DE 
 KONTAKT@DAS-MEDIENKOMBINAT.DE