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"

664 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
664
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
22
Aktionen
Geteilt
0
Downloads
5
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Usability wird i.d.R. als Benutzbarkeit oder auch „ Gebrauchstauglichkeit “ übersetzt
  • Usability wird i.d.R. als Benutzbarkeit oder auch „ Gebrauchstauglichkeit “ übersetzt Von Effektivität spricht man, wenn ein Produkt einen Nutzen hat und einen Zweck erfüllt. Wann hat eine Website einen Nutzen? Aus Sicht des End-Users kommt man zu dem Schluss: Eine Website hat einen Nutzen, wenn der Benutzer damit seine Ziele erreichen kann. Genügt das? Wir gehen einen Schritt weiter und sagen: Eine Website ist dann effektiv, wenn mit der Nutzung sowohl der Anwender als auch der Anbieter der Website seine Ziele erreichen kann. Die Effizienz beschreibt wie gut oder schlecht ein Anwender beim Benutzen der Anwendung sein Ziel verfolgen kann. Die Effizienz gibt konkret den Aufwand für den User an. Beispielsweise kann der Zeit- oder Klickaufwand für eine Aktion gemessen werden. Die Zufriedenheit ist ein subjektiver Eindruck aus Sicht des Users. Oft wird sie auch mit „User Experience“ umschrieben. Damit ist die Erfahrung gemeint, die ein Anwender beim Benutzen einer Anwendung macht. Benutzt er die Anwendung gerne? Macht es Spaß, die Anwendung zu benutzen oder ist es eher frustrierend?
  • dass Menschen mit Behinderungen das Web wahrnehmen, verstehen, navigieren und mit ihm interagieren können
  • 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

    ×