61
ONLINE-AGENTUR & SOFTWAREHAUS

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

Embed Size (px)

DESCRIPTION

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

Citation preview

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

ONLINE-AGENTUR & SOFTWAREHAUS

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

MODERNE USER INTERFACES AUF BASIS AKTUELLER (WEB)TECHNOLOGIEN.

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

EINLEITUNG

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

das MedienKombinat GmbH = Seite 4

USER INTERFACES IM ZEITVERLAUF

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

AKTUELLE RAHMENBEDINGUNGEN

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

DIE VIELFALT DER WEBNUTZUNG

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

“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

KOMMENTAR

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

Quelle:http://thenextweb.com/mobile/

2011/01/06the-great-rise-of-the-mobile-web/

Letzter Zugriff: 07.06.2012

das MedienKombinat GmbH = Seite 8

MOBILE VS. DESKTOP

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

Technologien

Endgeräte

Betriebssysteme

Browser und Browserversionen

Design-Trends

SEO-Anforderungen

das MedienKombinat GmbH = Seite 9

SICHTEN

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

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,

Bandbreiten

verschiedene Nutzungssituationen und -kontexte

das MedienKombinat GmbH = Seite 10

NUTZER & NUTZUNGSUMFELDER

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

das MedienKombinat GmbH = Seite 11

STUDIE: „DIGITALE GESELLSCHAFT 2011“

Typ 1: Digitale

Außenseiter

Typ 3: Berufsnutzer

Typ 2:

Gelegenheitsnutzer

Typ 4: Trendnutzer

Typ 5: Digitale Profis

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

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

das MedienKombinat GmbH = Seite 12

STUDIE: „DIGITALE GESELLSCHAFT 2011“

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

~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

Besitzen Nachholbedarf bei komplexen

Fähigkeiten

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

USABILITY & ACCESSIBILITY

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

„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

Design“ schließt Hilfsmittel für bestimmte

Gruppen von

Menschen mit Behinderungen, soweit sie

benötigt werden,

nicht aus.

das MedienKombinat GmbH = Seite 14

UNIVERSELLES DESIGN

Quelle: http://www.un.org/Depts/german/uebereinkommen/ar61106-dbgbl.pdf, zuletzt abgerufen: 24.09.2012

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

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

zu erreichen.

das MedienKombinat GmbH = Seite 15

USABILITY

Quelle: Hellbusch (2005): J. E. Hellbusch, „Barrierefreies Webdesign“, dpunkt, 2005, S. 46

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

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 disabilities.”

das MedienKombinat GmbH = Seite 16

ACCESSIBILITY

Quelle: http://www.w3.org/WAI/intro/accessibility.php, zuletzt abgerufen: 10.06.2012

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

das MedienKombinat GmbH = Seite 17

USABILITY VS. ACCESSIBILITY

Usability:

Effektiv

Effizient

Zufriedenstellend

Accessibility:

Wahrnehmbar

Bedienbar

Verständlich

Robust

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

USER INTERFACE DESIGN & WEBENTWICKLUNG IN DER PRAXIS

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

das MedienKombinat GmbH = Seite 19

AUFGABEN

DesignDesignKonzeptionKonzeption Technologie

Technologie

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

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

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

UCD-Phasen:

das MedienKombinat GmbH = Seite 21

KONZEPTION

DesignDesignAnalyseAnalyse EvaluationEvaluation

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

UCD-Methoden:

das MedienKombinat GmbH = Seite 22

KONZEPTION

Analyse Design Evaluation

X X X

X

X X

X

X X X

X

Methode

Card Sorting

Interviews

Fokusgruppen

Personas

Usability Tests

Use Cases

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

UCD-Methoden schaffen eine saubere Basis:

Sitemaps

Wireframes

Style Tiles

Kreationsprozess:

Kreativität, Projekterfahrung

UI-Toolkits

das MedienKombinat GmbH = Seite 23

DESIGN

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

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

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

das MedienKombinat GmbH = Seite 25

BEISPIEL: TOOLKIT JQUERY

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

das MedienKombinat GmbH = Seite 26

BEISPIEL: TOOLKIT BACKBASE

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

das MedienKombinat GmbH = Seite 27

BEISPIEL: TOOLKIT IPAD (RETINA)

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

das MedienKombinat GmbH = Seite 28

BEISPIEL: TOOLKIT ANDROID

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

Web-Applikation

Mobil-optimierte Website

Apps

Responsive Design

das MedienKombinat GmbH = Seite 29

TECHNOLOGIE

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

das MedienKombinat GmbH = Seite 30

TECHNOLOGIE: WEB-APPLIKATIONEN

Web als Infrastruktur, Webbrowser als

Client

W3C Webstandards

HTML5/CSS3

Javascript/AJAX

Frameworks

Page 32: SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien"
Page 33: SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien"
Page 34: SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien"

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

Keine Anpassung an ein bestimmtes

Endgeräte

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

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

Lediglich ~23 % präferieren den Einkauf über

eine App

Page 36: SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien"
Page 37: SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien"
Page 38: SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien"
Page 39: SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien"
Page 40: SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien"

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

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

das MedienKombinat GmbH = Seite 41

BEISPIEL: IPAD WEB APP ETERNIT AG

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

das MedienKombinat GmbH = Seite 42

BEISPIEL: NATIVE APPS CFC

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

RESPONSIVE DESIGN

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

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

Mobile-First-Ansatz

das MedienKombinat GmbH = Seite 44

RESPONSIVE DESIGN

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

das MedienKombinat GmbH = Seite 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/)

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

Design:

Rastersysteme, bestehend aus:

Spalten Spaltenzwischenräumen Grundlinie

Klare Linien und Strukturen

das MedienKombinat GmbH = Seite 46

RESPONSIVE DESIGN

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

das MedienKombinat GmbH = Seite 47

BEISPIEL: GOLDEN GRID SYSTEM

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

Technologie:

HTML5 / CSS3

Media Queries

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

Javascript-Fallbacks (Modernizr, usw.)

das MedienKombinat GmbH = Seite 48

RESPONSIVE DESIGN

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

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

RESPONSIVE DESIGN

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

Sony www.sony.com

Barack Obama www.barackobama.com

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

www.webdagene.no

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

Responsive Design

Webfonts Illustrationen

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

FAZIT

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

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 begreifen: Anforderungsdefinition -> Konzeption -> Design -> Technologie

das MedienKombinat GmbH = Seite 54

FAZIT

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

LINKS

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

das MedienKombinat GmbH = Seite 56

LINKS

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

Optimale 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 optimal anordnen: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 Sizes http://uxmovement.com/buttons/finger-friendly-design-ideal-mobile-touch-target-sizes/

das MedienKombinat GmbH = Seite 57

LINKS

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

Das richtige Keyboard für das Ausfüllen von Formularen auf 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

LINKS

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

KONTAKT

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

E-Mail: [email protected]: +49 331 97996620Mobil: +49 177 4946559

XING: http://www.xing.com/profile/Tim_Neugebauer

das MedienKombinat GmbH = Seite 60

Dipl.-Kfm. Tim Neugebauer

Geschäftsführer / CEO

das MedienKombinat GmbH

Hauptsitz Chemnitz:Schönherrstraße 809113 ChemnitzDeutschland

Telefon :+49 (0) 371 356369-0Fax: +49 (0) 371 356369-29

[email protected]

Büro Berlin-Potsdam:Filmstudios Babelsberg August-Bebel-Straße 2714482 Potsdam Deutschland

Telefon: +49 (0) 331 97996-620

Fax: +49 (0) 331 97996-622

[email protected]

Web:www.das-medienkombinat.dewww.twitter.com/

medienkombinatwww.facebook.com/

medienkombinat

KONTAKT

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

WWW.DAS-MEDIENKOMBINAT.DE [email protected]