SlideShare ist ein Scribd-Unternehmen logo
ONLINE-AGENTUR & SOFTWAREHAUS
MODERNE USER INTERFACES AUF BASIS
AKTUELLER (WEB)TECHNOLOGIEN.
EINLEITUNG
USER INTERFACES IM
 ZEITVERLAUF




                     das MedienKombinat GmbH   =
                                                   Seite 4
AKTUELLE RAHMENBEDINGUNGEN
DIE VIELFALT DER WEBNUTZUNG
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
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
SICHTEN


 Technologien

 Endgeräte

 Betriebssysteme

 Browser und Browserversionen

 Design-Trends

 SEO-Anforderungen


                                 das MedienKombinat GmbH   =
                                                               Seite 9
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
                                                                                    =
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
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
USABILITY & ACCESSIBILITY
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
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
                                                                                                                              =
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
USABILITY VS. ACCESSIBILITY



 Usability:            Accessibility:
  Effektiv             Wahrnehmbar

  Effizient            Bedienbar

  Zufriedenstellend    Verständlich

                        Robust




                                        das MedienKombinat GmbH   =
                                                                      Seite 17
USER INTERFACE DESIGN & WEBENTWICKLUNG
IN DER PRAXIS
AUFGABEN




  Konzeption   Design   Technologie




                                  das MedienKombinat GmbH   =
                                                                Seite 19
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
                                                                              =
KONZEPTION



UCD-Phasen:




     Analyse   Design   Evaluation




                                     das MedienKombinat GmbH   =
                                                                   Seite 21
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
DESIGN



 UCD-Methoden schaffen eine saubere Basis:
   − Sitemaps

   − Wireframes

   − Style Tiles

 Kreationsprozess:
   − Kreativität, Projekterfahrung

   − UI-Toolkits



                                              das MedienKombinat GmbH   =
                                                                            Seite 23
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
BEISPIEL: TOOLKIT JQUERY




                           das MedienKombinat GmbH   =
                                                         Seite 25
BEISPIEL: TOOLKIT BACKBASE




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




                                  das MedienKombinat GmbH   =
                                                                Seite 27
BEISPIEL: TOOLKIT ANDROID




                            das MedienKombinat GmbH   =
                                                          Seite 28
TECHNOLOGIE



 Web-Applikation

 Mobil-optimierte Website

 Apps

 Responsive Design




                             das MedienKombinat GmbH   =
                                                           Seite 29
TECHNOLOGIE: WEB-
  APPLIKATIONEN

 Web als Infrastruktur, Webbrowser als Client

 W3C Webstandards

 HTML5/CSS3

 Javascript/AJAX

 Frameworks




                                                 das MedienKombinat GmbH   =
                                                                               Seite 30
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
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
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
BEISPIEL: IPAD WEB APP ETERNIT
 AG




                                 das MedienKombinat GmbH   =
                                                               Seite 41
BEISPIEL: NATIVE APPS CFC




                            das MedienKombinat GmbH   =
                                                          Seite 42
RESPONSIVE DESIGN
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
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
RESPONSIVE DESIGN


Design:

 Rastersysteme, bestehend aus:

     −    Spalten
     −    Spaltenzwischenräumen
     −    Grundlinie

 Klare Linien und Strukturen




                                  das MedienKombinat GmbH   =
                                                                Seite 46
BEISPIEL: GOLDEN GRID SYSTEM




                               das MedienKombinat GmbH   =
                                                             Seite 47
RESPONSIVE DESIGN


Technologie:

 HTML5 / CSS3

 Media Queries

 Javascript-Touchgesten (Sensa Touch, jQuery
  Mobile, usw.)

 Javascript-Fallbacks (Modernizr, usw.)



                                                das MedienKombinat GmbH   =
                                                                              Seite 48
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
Sony                  www.sony.com




Barack Obama   www.barackobama.com
www.webdagene.no
Responsive Design




Webfonts            Illustrationen
FAZIT
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
                                                                            =
LINKS
LINKS




        das MedienKombinat GmbH   =
                                      Seite 56
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
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
KONTAKT
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
WWW.DAS-MEDIENKOMBINAT.DE   
                                   KONTAKT@DAS-MEDIENKOMBINAT.DE

Weitere ähnliche Inhalte

Andere mochten auch

D.O.: O gordo é você!
D.O.: O gordo é você!D.O.: O gordo é você!
D.O.: O gordo é você!
pr_afsalbergaria
 
NUI Usability - Zur Gestaltung des Nichts
NUI Usability - Zur Gestaltung des NichtsNUI Usability - Zur Gestaltung des Nichts
NUI Usability - Zur Gestaltung des Nichts
SENSORY-MINDS
 
Die Anwender im Fokus - User experience fühlen und messen
Die Anwender im Fokus - User experience fühlen und messenDie Anwender im Fokus - User experience fühlen und messen
Die Anwender im Fokus - User experience fühlen und messen
rschuppe
 
ABC Analyse
ABC AnalyseABC Analyse
ABC Analyse
littlekittycat
 
[Infographic] How will Internet of Things (IoT) change the world as we know it?
[Infographic] How will Internet of Things (IoT) change the world as we know it?[Infographic] How will Internet of Things (IoT) change the world as we know it?
[Infographic] How will Internet of Things (IoT) change the world as we know it?
InterQuest Group
 
The Physical Interface
The Physical InterfaceThe Physical Interface
The Physical Interface
Josh Clark
 

Andere mochten auch (6)

D.O.: O gordo é você!
D.O.: O gordo é você!D.O.: O gordo é você!
D.O.: O gordo é você!
 
NUI Usability - Zur Gestaltung des Nichts
NUI Usability - Zur Gestaltung des NichtsNUI Usability - Zur Gestaltung des Nichts
NUI Usability - Zur Gestaltung des Nichts
 
Die Anwender im Fokus - User experience fühlen und messen
Die Anwender im Fokus - User experience fühlen und messenDie Anwender im Fokus - User experience fühlen und messen
Die Anwender im Fokus - User experience fühlen und messen
 
ABC Analyse
ABC AnalyseABC Analyse
ABC Analyse
 
[Infographic] How will Internet of Things (IoT) change the world as we know it?
[Infographic] How will Internet of Things (IoT) change the world as we know it?[Infographic] How will Internet of Things (IoT) change the world as we know it?
[Infographic] How will Internet of Things (IoT) change the world as we know it?
 
The Physical Interface
The Physical InterfaceThe Physical Interface
The Physical Interface
 

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

Branded Interaction Design ... oder warum Usability nur der Anfang ist.
Branded Interaction Design ... oder warum Usability nur der Anfang ist. Branded Interaction Design ... oder warum Usability nur der Anfang ist.
Branded Interaction Design ... oder warum Usability nur der Anfang ist.
think moto GmbH
 
Social Media - Chancen und Risiken
Social Media - Chancen und RisikenSocial Media - Chancen und Risiken
Social Media - Chancen und Risiken
Ansgar Bolle
 
Hochschul-Websites: Konzeption und Management
Hochschul-Websites: Konzeption und ManagementHochschul-Websites: Konzeption und Management
Hochschul-Websites: Konzeption und Management
Mann beißt Hund Agentur für Kommunikation
 
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...
Unic
 
SOCIAL MEDIA IN DER INDUSTRIE
SOCIAL MEDIA IN DER INDUSTRIESOCIAL MEDIA IN DER INDUSTRIE
SOCIAL MEDIA IN DER INDUSTRIE
Westaflex
 
Innovatives Web- und Instore-Marketing - Web-Applikationen für den Tourismus
Innovatives Web- und Instore-Marketing - Web-Applikationen für den TourismusInnovatives Web- und Instore-Marketing - Web-Applikationen für den Tourismus
Innovatives Web- und Instore-Marketing - Web-Applikationen für den Tourismus
VCAT Consulting GmbH
 
Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)
Wolfram Nagel
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Webmontag MRN
 
Medienkonvergenz von Zeitschrift und mobilem Internet [Präsentation]
Medienkonvergenz von Zeitschrift und mobilem Internet [Präsentation]Medienkonvergenz von Zeitschrift und mobilem Internet [Präsentation]
Medienkonvergenz von Zeitschrift und mobilem Internet [Präsentation]
Marcel Schöne
 
Social Media Monitoring mit datenwerks Opinion Tracker
Social Media Monitoring mit datenwerks Opinion TrackerSocial Media Monitoring mit datenwerks Opinion Tracker
Social Media Monitoring mit datenwerks Opinion Tracker
lisafuchs
 
Gerd Leonhard: Zukunft Der Kulturwirtschaft
Gerd Leonhard: Zukunft Der KulturwirtschaftGerd Leonhard: Zukunft Der Kulturwirtschaft
Gerd Leonhard: Zukunft Der Kulturwirtschaft
franktentler.com
 
Enterprise 2.0: Was Käse und Schokolade mit emergenten Technologien zu tun haben
Enterprise 2.0: Was Käse und Schokolade mit emergenten Technologien zu tun habenEnterprise 2.0: Was Käse und Schokolade mit emergenten Technologien zu tun haben
Enterprise 2.0: Was Käse und Schokolade mit emergenten Technologien zu tun haben
Unic
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
digiparden GmbH
 
Praesi Wim Web 20 071206 3
Praesi Wim Web 20 071206 3Praesi Wim Web 20 071206 3
Praesi Wim Web 20 071206 3
guestc92486
 
innovation 2011
innovation 2011innovation 2011
innovation 2011
Ullrich Neiss
 
Internet und Social Media
Internet und Social MediaInternet und Social Media
Internet und Social Media
AREA-NET GmbH
 
Crowdsourced Innovation - innovators studio Präsentation
Crowdsourced Innovation - innovators studio PräsentationCrowdsourced Innovation - innovators studio Präsentation
Crowdsourced Innovation - innovators studio Präsentation
innosabi GmbH
 
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
curtis newton gmbh (formerly known as dw capital gmbh)
 

Ähnlich wie SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien" (20)

Branded Interaction Design ... oder warum Usability nur der Anfang ist.
Branded Interaction Design ... oder warum Usability nur der Anfang ist. Branded Interaction Design ... oder warum Usability nur der Anfang ist.
Branded Interaction Design ... oder warum Usability nur der Anfang ist.
 
Social Media - Chancen und Risiken
Social Media - Chancen und RisikenSocial Media - Chancen und Risiken
Social Media - Chancen und Risiken
 
Hochschul-Websites: Konzeption und Management
Hochschul-Websites: Konzeption und ManagementHochschul-Websites: Konzeption und Management
Hochschul-Websites: Konzeption und Management
 
portfolio
portfolioportfolio
portfolio
 
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...
«Mobile Design Thinking» – Erfolgreiches «Mobile Web» zwischen Hype und echte...
 
SOCIAL MEDIA IN DER INDUSTRIE
SOCIAL MEDIA IN DER INDUSTRIESOCIAL MEDIA IN DER INDUSTRIE
SOCIAL MEDIA IN DER INDUSTRIE
 
Innovatives Web- und Instore-Marketing - Web-Applikationen für den Tourismus
Innovatives Web- und Instore-Marketing - Web-Applikationen für den TourismusInnovatives Web- und Instore-Marketing - Web-Applikationen für den Tourismus
Innovatives Web- und Instore-Marketing - Web-Applikationen für den Tourismus
 
Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
 
Medienkonvergenz von Zeitschrift und mobilem Internet [Präsentation]
Medienkonvergenz von Zeitschrift und mobilem Internet [Präsentation]Medienkonvergenz von Zeitschrift und mobilem Internet [Präsentation]
Medienkonvergenz von Zeitschrift und mobilem Internet [Präsentation]
 
Social Media Monitoring mit datenwerks Opinion Tracker
Social Media Monitoring mit datenwerks Opinion TrackerSocial Media Monitoring mit datenwerks Opinion Tracker
Social Media Monitoring mit datenwerks Opinion Tracker
 
Meet Magento 01.06.2010
Meet Magento 01.06.2010Meet Magento 01.06.2010
Meet Magento 01.06.2010
 
Gerd Leonhard: Zukunft Der Kulturwirtschaft
Gerd Leonhard: Zukunft Der KulturwirtschaftGerd Leonhard: Zukunft Der Kulturwirtschaft
Gerd Leonhard: Zukunft Der Kulturwirtschaft
 
Enterprise 2.0: Was Käse und Schokolade mit emergenten Technologien zu tun haben
Enterprise 2.0: Was Käse und Schokolade mit emergenten Technologien zu tun habenEnterprise 2.0: Was Käse und Schokolade mit emergenten Technologien zu tun haben
Enterprise 2.0: Was Käse und Schokolade mit emergenten Technologien zu tun haben
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
 
Praesi Wim Web 20 071206 3
Praesi Wim Web 20 071206 3Praesi Wim Web 20 071206 3
Praesi Wim Web 20 071206 3
 
innovation 2011
innovation 2011innovation 2011
innovation 2011
 
Internet und Social Media
Internet und Social MediaInternet und Social Media
Internet und Social Media
 
Crowdsourced Innovation - innovators studio Präsentation
Crowdsourced Innovation - innovators studio PräsentationCrowdsourced Innovation - innovators studio Präsentation
Crowdsourced Innovation - innovators studio Präsentation
 
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
 

Mehr von dasmedienkombinatde

Management der Digital Business Transformation, CO-REACH 2014
Management der Digital Business Transformation, CO-REACH 2014Management der Digital Business Transformation, CO-REACH 2014
Management der Digital Business Transformation, CO-REACH 2014
dasmedienkombinatde
 
Design Trends 2012 - Ecomm Berlin 2012-06-21-
Design Trends 2012 - Ecomm Berlin 2012-06-21-Design Trends 2012 - Ecomm Berlin 2012-06-21-
Design Trends 2012 - Ecomm Berlin 2012-06-21-
dasmedienkombinatde
 
Meet Magento Agentur-Pitch
Meet Magento Agentur-PitchMeet Magento Agentur-Pitch
Meet Magento Agentur-Pitch
dasmedienkombinatde
 
EOSD 2012
EOSD 2012EOSD 2012
Mkpostman jandbeyond
Mkpostman jandbeyondMkpostman jandbeyond
Mkpostman jandbeyond
dasmedienkombinatde
 
Medien Kombinat Meet Magento 05022009
Medien Kombinat Meet Magento 05022009Medien Kombinat Meet Magento 05022009
Medien Kombinat Meet Magento 05022009dasmedienkombinatde
 

Mehr von dasmedienkombinatde (6)

Management der Digital Business Transformation, CO-REACH 2014
Management der Digital Business Transformation, CO-REACH 2014Management der Digital Business Transformation, CO-REACH 2014
Management der Digital Business Transformation, CO-REACH 2014
 
Design Trends 2012 - Ecomm Berlin 2012-06-21-
Design Trends 2012 - Ecomm Berlin 2012-06-21-Design Trends 2012 - Ecomm Berlin 2012-06-21-
Design Trends 2012 - Ecomm Berlin 2012-06-21-
 
Meet Magento Agentur-Pitch
Meet Magento Agentur-PitchMeet Magento Agentur-Pitch
Meet Magento Agentur-Pitch
 
EOSD 2012
EOSD 2012EOSD 2012
EOSD 2012
 
Mkpostman jandbeyond
Mkpostman jandbeyondMkpostman jandbeyond
Mkpostman jandbeyond
 
Medien Kombinat Meet Magento 05022009
Medien Kombinat Meet Magento 05022009Medien Kombinat Meet Magento 05022009
Medien Kombinat Meet Magento 05022009
 

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

  • 2. MODERNE USER INTERFACES AUF BASIS AKTUELLER (WEB)TECHNOLOGIEN.
  • 4. USER INTERFACES IM ZEITVERLAUF das MedienKombinat GmbH = Seite 4
  • 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
  • 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
  • 31.
  • 32.
  • 33.
  • 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
  • 36.
  • 37.
  • 38.
  • 39.
  • 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
  • 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
  • 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
  • 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

Hinweis der Redaktion

  1. Usability wird i.d.R. als Benutzbarkeit oder auch „ Gebrauchstauglichkeit “ übersetzt
  2. 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?
  3. dass Menschen mit Behinderungen das Web wahrnehmen, verstehen, navigieren und mit ihm interagieren können