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

ONLINE-AGENTUR & SOFTWAREHAUS

MODERNE USER INTERFACES AUF BASIS AKTUELLER (WEB)TECHNOLOGIEN.

EINLEITUNG

das MedienKombinat GmbH = Seite 4

USER INTERFACES IM ZEITVERLAUF

AKTUELLE RAHMENBEDINGUNGEN

DIE VIELFALT DER WEBNUTZUNG

“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

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

Technologien

Endgeräte

Betriebssysteme

Browser und Browserversionen

Design-Trends

SEO-Anforderungen

das MedienKombinat GmbH = Seite 9

SICHTEN

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

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

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

USABILITY & ACCESSIBILITY

„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

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

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

das MedienKombinat GmbH = Seite 17

USABILITY VS. ACCESSIBILITY

Usability:

Effektiv

Effizient

Zufriedenstellend

Accessibility:

Wahrnehmbar

Bedienbar

Verständlich

Robust

USER INTERFACE DESIGN & WEBENTWICKLUNG IN DER PRAXIS

das MedienKombinat GmbH = Seite 19

AUFGABEN

DesignDesignKonzeptionKonzeption Technologie

Technologie

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:

das MedienKombinat GmbH = Seite 21

KONZEPTION

DesignDesignAnalyseAnalyse EvaluationEvaluation

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

…

UCD-Methoden schaffen eine saubere Basis:

Sitemaps

Wireframes

Style Tiles

Kreationsprozess:

Kreativität, Projekterfahrung

UI-Toolkits

das MedienKombinat GmbH = Seite 23

DESIGN

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/

das MedienKombinat GmbH = Seite 25

BEISPIEL: TOOLKIT JQUERY

das MedienKombinat GmbH = Seite 26

BEISPIEL: TOOLKIT BACKBASE

das MedienKombinat GmbH = Seite 27

BEISPIEL: TOOLKIT IPAD (RETINA)

das MedienKombinat GmbH = Seite 28

BEISPIEL: TOOLKIT ANDROID

Web-Applikation

Mobil-optimierte Website

Apps

Responsive Design

das MedienKombinat GmbH = Seite 29

TECHNOLOGIE

das MedienKombinat GmbH = Seite 30

TECHNOLOGIE: WEB-APPLIKATIONEN

Web als Infrastruktur, Webbrowser als

Client

W3C Webstandards

HTML5/CSS3

Javascript/AJAX

Frameworks

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

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

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

das MedienKombinat GmbH = Seite 41

BEISPIEL: IPAD WEB APP ETERNIT AG

das MedienKombinat GmbH = Seite 42

BEISPIEL: NATIVE APPS CFC

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

Mobile-First-Ansatz

das MedienKombinat GmbH = Seite 44

RESPONSIVE DESIGN

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/)

Design:

Rastersysteme, bestehend aus:

Spalten Spaltenzwischenräumen Grundlinie

Klare Linien und Strukturen

das MedienKombinat GmbH = Seite 46

RESPONSIVE DESIGN

das MedienKombinat GmbH = Seite 47

BEISPIEL: GOLDEN GRID SYSTEM

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

RESPONSIVE DESIGN

Sony www.sony.com

Barack Obama www.barackobama.com

www.webdagene.no

Responsive Design

Webfonts Illustrationen

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

das MedienKombinat GmbH = Seite 54

FAZIT

LINKS

das MedienKombinat GmbH = Seite 56

LINKS

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

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

KONTAKT

E-Mail: tim.neugebauer@das-medienkombinat.deTelefon: +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

chemnitz@das-medienkombinat.de

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

berlin.potsdam@das-medienkombinat.de

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

medienkombinatwww.facebook.com/

medienkombinat

KONTAKT

WWW.DAS-MEDIENKOMBINAT.DE KONTAKT@DAS-MEDIENKOMBINAT.DE