Upload
dasmedienkombinatde
View
402
Download
1
Embed Size (px)
DESCRIPTION
SIBB "Digital Business" - "Moderne User Interfaces auf Basis aktueller Webtechnologien"
Citation preview
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 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: [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
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
Web:www.das-medienkombinat.dewww.twitter.com/
medienkombinatwww.facebook.com/
medienkombinat
KONTAKT
WWW.DAS-MEDIENKOMBINAT.DE [email protected]