Successfully reported this slideshow.
ONLINE-AGENTUR & SOFTWAREHAUS
MODERNE USER INTERFACES AUF BASISAKTUELLER (WEB)TECHNOLOGIEN.
EINLEITUNG
USER INTERFACES IM ZEITVERLAUF                     das MedienKombinat GmbH   =                                            ...
AKTUELLE RAHMENBEDINGUNGEN
DIE VIELFALT DER WEBNUTZUNG
KOMMENTAR“Die einen Nutzer kennen sich aus, dieanderen nicht. Der eine surft auf dem iPhone,der andere mit Riesenbuchstabe...
MOBILE VS. DESKTOP                     Quelle:                     http://thenextweb.com/mobile/2011/0                    ...
SICHTEN Technologien Endgeräte Betriebssysteme Browser und Browserversionen Design-Trends SEO-Anforderungen         ...
NUTZER & NUTZUNGSUMFELDER Wir gestalten und entwickeln für Nutzer:   − in verschiedenen Altersstufen   − mit verschiedene...
STUDIE: „DIGITALE GESELLSCHAFT  2011“Typ 1: Digitale Außenseiter                                   Typ 3: Berufsnutzer    ...
STUDIE: „DIGITALE GESELLSCHAFT  2011“ ~26% der Bevölkerung sind „Digitale  Außenseiter“:   − Große Zurückhaltung ggü. tec...
USABILITY & ACCESSIBILITY
UNIVERSELLES DESIGN„Universelles Design“ [ist] ein Design von Produkten,  Umfeldern,Programmen und Dienstleistungen in der...
USABILITYGebrauchstauglichkeit beschreibt nach DIN EN ISO  9241 dasAusmaß, in dem ein Produkt durch Benutzer in  einemNutz...
ACCESSIBILITYDefinition W3C WAI:“…Web accessibility means that people with  disabilities canperceive, understand, navigate...
USABILITY VS. ACCESSIBILITY Usability:            Accessibility:  Effektiv             Wahrnehmbar  Effizient          ...
USER INTERFACE DESIGN & WEBENTWICKLUNGIN DER PRAXIS
AUFGABEN  Konzeption   Design   Technologie                                  das MedienKombinat GmbH   =                  ...
KONZEPTIONUser Centered Design als User Interface Design  Prozess: zur Umsetzung interaktiver Systeme mit Fokus auf Gebr...
KONZEPTIONUCD-Phasen:     Analyse   Design   Evaluation                                     das MedienKombinat GmbH   =   ...
KONZEPTIONUCD-Methoden:Methode           Analyse   Design   EvaluationCard Sorting        X         X          XInterviews...
DESIGN UCD-Methoden schaffen eine saubere Basis:   − Sitemaps   − Wireframes   − Style Tiles Kreationsprozess:   − Kreat...
BEISPIEL: SHOWCASES CSS MANIA: http://www.cssmania.com/ CSS BEAUTY: http://www.cssbeauty.com/gallery/ DESIGN GALLERIA: ...
BEISPIEL: TOOLKIT JQUERY                           das MedienKombinat GmbH   =                                            ...
BEISPIEL: TOOLKIT BACKBASE                             das MedienKombinat GmbH   =                                        ...
BEISPIEL: TOOLKIT IPAD (RETINA)                                  das MedienKombinat GmbH   =                              ...
BEISPIEL: TOOLKIT ANDROID                            das MedienKombinat GmbH   =                                          ...
TECHNOLOGIE Web-Applikation Mobil-optimierte Website Apps Responsive Design                             das MedienKomb...
TECHNOLOGIE: WEB-  APPLIKATIONEN Web als Infrastruktur, Webbrowser als Client W3C Webstandards HTML5/CSS3 Javascript/A...
TECHNOLOGIE: MOBIL-OPTIMIERTE  WEBSITE Auch hier: Web als Infrastruktur, Webbrowser als  Client Anpassung einer bestehen...
STUDIEStudie des ECC Handel in Zusammenarbeit mit  PayPal und Shopgate: „Mobile Commerce in  Deutschland – Die Rolle des S...
TECHNOLOGIE: APPS Web Apps:   − Web als Infrastruktur, Webbrowser als Client   − App läd im Browser, nutzt aber spezifisc...
BEISPIEL: IPAD WEB APP ETERNIT AG                                 das MedienKombinat GmbH   =                             ...
BEISPIEL: NATIVE APPS CFC                            das MedienKombinat GmbH   =                                          ...
RESPONSIVE DESIGN
RESPONSIVE DESIGNAusgangspunkt: Zunehmende Verbreitung internetfähiger mobiler  Endgeräte Verschiede Mobile-Betriebssyst...
RESPONSIVE DESIGNResponsive Design    amBeispiel des CSS-Frameworks    Foundation** Foundation is an easy to use, powerful...
RESPONSIVE DESIGNDesign: Rastersysteme, bestehend aus:     −    Spalten     −    Spaltenzwischenräumen     −    Grundlini...
BEISPIEL: GOLDEN GRID SYSTEM                               das MedienKombinat GmbH   =                                    ...
RESPONSIVE DESIGNTechnologie: HTML5 / CSS3 Media Queries Javascript-Touchgesten (Sensa Touch, jQuery  Mobile, usw.) Ja...
RESPONSIVE DESIGNMedia Queries: CSS 2: media types CSS 3: media queries Anstatt nach einem bestimmten Medium zu  schaue...
Sony                  www.sony.comBarack Obama   www.barackobama.com
www.webdagene.no
Responsive DesignWebfonts            Illustrationen
FAZIT
FAZIT Aktuelle Web-Technologien und insbesondere  mobile Endgeräte treiben das User Interface  Design Nutzer und Nutzung...
LINKS
LINKS        das MedienKombinat GmbH   =                                      Seite 56
LINKSOptimale Gestaltung von Drop-Down-Menus:Unified Dropdown Menu: One Menu to Rule All Linkshttp://uxmovement.com/naviga...
LINKSDas richtige Keyboard für das Ausfüllen von Formularenauf mobilen Endgeräten:Input Types: Give Users the Right Keyboa...
KONTAKT
KONTAKT                                                           das MedienKombinat GmbH                                 ...
WWW.DAS-MEDIENKOMBINAT.DE                                      KONTAKT@DAS-MEDIENKOMBINAT.DE
SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien"
SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien"
SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien"
SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien"
SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien"
SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien"
SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien"
Nächste SlideShare
Wird geladen in …5
×

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

725 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

  1. 1. ONLINE-AGENTUR & SOFTWAREHAUS
  2. 2. MODERNE USER INTERFACES AUF BASISAKTUELLER (WEB)TECHNOLOGIEN.
  3. 3. EINLEITUNG
  4. 4. USER INTERFACES IM ZEITVERLAUF das MedienKombinat GmbH = Seite 4
  5. 5. AKTUELLE RAHMENBEDINGUNGEN
  6. 6. DIE VIELFALT DER WEBNUTZUNG
  7. 7. KOMMENTAR“Die einen Nutzer kennen sich aus, dieanderen nicht. Der eine surft auf dem iPhone,der andere mit Riesenbuchstaben. Und dieWebdesigner stehen mittendrin und wollenauch noch etwas hübsches daraus zaubern!Kann das gut gehen?“Gerrit van Aaken, Webentwickler und Blogger das MedienKombinat GmbH = Seite 7
  8. 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. 9. SICHTEN Technologien Endgeräte Betriebssysteme Browser und Browserversionen Design-Trends SEO-Anforderungen das MedienKombinat GmbH = Seite 9
  10. 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. 11. STUDIE: „DIGITALE GESELLSCHAFT 2011“Typ 1: Digitale Außenseiter Typ 3: Berufsnutzer Typ 5: Digitale ProfisTyp 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. 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. 13. USABILITY & ACCESSIBILITY
  14. 14. UNIVERSELLES DESIGN„Universelles Design“ [ist] ein Design von Produkten, Umfeldern,Programmen und Dienstleistungen in der Weise, dass sievon allen Menschen möglichst weitgehend ohne eine Anpassungoder 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. 15. USABILITYGebrauchstauglichkeit beschreibt nach DIN EN ISO 9241 dasAusmaß, in dem ein Produkt durch Benutzer in einemNutzungskontext 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. 16. ACCESSIBILITYDefinition W3C WAI:“…Web accessibility means that people with disabilities canperceive, understand, navigate, and interact with the Web, andthat 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. 17. USABILITY VS. ACCESSIBILITY Usability: Accessibility:  Effektiv  Wahrnehmbar  Effizient  Bedienbar  Zufriedenstellend  Verständlich  Robust das MedienKombinat GmbH = Seite 17
  18. 18. USER INTERFACE DESIGN & WEBENTWICKLUNGIN DER PRAXIS
  19. 19. AUFGABEN Konzeption Design Technologie das MedienKombinat GmbH = Seite 19
  20. 20. KONZEPTIONUser 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. 21. KONZEPTIONUCD-Phasen: Analyse Design Evaluation das MedienKombinat GmbH = Seite 21
  22. 22. KONZEPTIONUCD-Methoden:Methode Analyse Design EvaluationCard Sorting X X XInterviews XFokusgruppen X XPersonas XUsability Tests X X XUse Cases X… das MedienKombinat GmbH = Seite 22
  23. 23. DESIGN UCD-Methoden schaffen eine saubere Basis: − Sitemaps − Wireframes − Style Tiles Kreationsprozess: − Kreativität, Projekterfahrung − UI-Toolkits das MedienKombinat GmbH = Seite 23
  24. 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. 25. BEISPIEL: TOOLKIT JQUERY das MedienKombinat GmbH = Seite 25
  26. 26. BEISPIEL: TOOLKIT BACKBASE das MedienKombinat GmbH = Seite 26
  27. 27. BEISPIEL: TOOLKIT IPAD (RETINA) das MedienKombinat GmbH = Seite 27
  28. 28. BEISPIEL: TOOLKIT ANDROID das MedienKombinat GmbH = Seite 28
  29. 29. TECHNOLOGIE Web-Applikation Mobil-optimierte Website Apps Responsive Design das MedienKombinat GmbH = Seite 29
  30. 30. TECHNOLOGIE: WEB- APPLIKATIONEN Web als Infrastruktur, Webbrowser als Client W3C Webstandards HTML5/CSS3 Javascript/AJAX Frameworks das MedienKombinat GmbH = Seite 30
  31. 31. 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
  32. 32. STUDIEStudie 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
  33. 33. 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
  34. 34. BEISPIEL: IPAD WEB APP ETERNIT AG das MedienKombinat GmbH = Seite 41
  35. 35. BEISPIEL: NATIVE APPS CFC das MedienKombinat GmbH = Seite 42
  36. 36. RESPONSIVE DESIGN
  37. 37. RESPONSIVE DESIGNAusgangspunkt: 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
  38. 38. RESPONSIVE DESIGNResponsive Design amBeispiel 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
  39. 39. RESPONSIVE DESIGNDesign: Rastersysteme, bestehend aus: − Spalten − Spaltenzwischenräumen − Grundlinie Klare Linien und Strukturen das MedienKombinat GmbH = Seite 46
  40. 40. BEISPIEL: GOLDEN GRID SYSTEM das MedienKombinat GmbH = Seite 47
  41. 41. RESPONSIVE DESIGNTechnologie: HTML5 / CSS3 Media Queries Javascript-Touchgesten (Sensa Touch, jQuery Mobile, usw.) Javascript-Fallbacks (Modernizr, usw.) das MedienKombinat GmbH = Seite 48
  42. 42. RESPONSIVE DESIGNMedia 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
  43. 43. Sony www.sony.comBarack Obama www.barackobama.com
  44. 44. www.webdagene.no
  45. 45. Responsive DesignWebfonts Illustrationen
  46. 46. FAZIT
  47. 47. 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 =
  48. 48. LINKS
  49. 49. LINKS das MedienKombinat GmbH = Seite 56
  50. 50. LINKSOptimale Gestaltung von Drop-Down-Menus:Unified Dropdown Menu: One Menu to Rule All Linkshttp://uxmovement.com/navigation/unified-dropdown-menu-one-menu-to-rule-all-links/Wie lassen sich Icons optimal gestalten und optimalanordnen:9 Rules to Make Your Icons Clear and Intuitivehttp://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 Sizeshttp://uxmovement.com/buttons/finger-friendly-design-ideal-mobile-touch-target-sizes/ das MedienKombinat GmbH = Seite 57
  51. 51. LINKSDas richtige Keyboard für das Ausfüllen von Formularenauf mobilen Endgeräten:Input Types: Give Users the Right Keyboard on Mobile Formshttp://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 Fieldshttp://uxmovement.com/forms/why-users-fill-out-forms-faster-with-unified-text-fields/Login-Formular richtig platzieren:The Danger of Using Home Page Login Fieldshttp://uxmovement.com/forms/the-danger-of-using-home-page-login-fields/ das MedienKombinat GmbH = Seite 58
  52. 52. KONTAKT
  53. 53. KONTAKT das MedienKombinat GmbH Hauptsitz Chemnitz: Schönherrstraße 8 09113 Chemnitz Deutschland Telefon :+49 (0) 371 356369-0 Fax: +49 (0) 371 356369-29Dipl.-Kfm. Tim chemnitz@das-medienkombinat.de Neugebauer Büro Berlin-Potsdam:Geschäftsführer / CEO Filmstudios Babelsberg August-Bebel-Straße 27 14482 PotsdamE-Mail: tim.neugebauer@das-medienkombinat.de DeutschlandTelefon: +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
  54. 54. WWW.DAS-MEDIENKOMBINAT.DE   KONTAKT@DAS-MEDIENKOMBINAT.DE

×