Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

49
Konzeption, Usability und Umsetzung mobiler Websites HANDLICHE DESIGNKONZEPTE

description

 

Transcript of Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Page 1: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Konzeption, Usability und Umsetzung mobiler Websites

HANDLICHEDESIGNKONZEPTE

Page 2: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

PRÄSENTATION VON PETER ROZEK THINKGREEN - NEUE MEDIEN

[email protected]

http://www.think-green.dehttp://www.peter-rozek.de

Page 3: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Mythos und Wahrheit: Mobiles Internet.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 4: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Es gibt nicht das mobile Internet!

Mythos

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 5: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Es gibt Unterschiedliche Zugangsmöglichkeiten zum Internet!

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 6: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Mobile Webdesign ist kein Webdesign für das iPhone.

Mythos

Page 7: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Fokus auf eine geräteunabhängige Interaktion setzen.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 8: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Mobile Webdesign setzt Reduktion voraus.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 9: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

„So when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today's desktop-accessed Web sites. That's good user experience and good for business.“

Luke Wroblewski, Mobile Firsthttp://www.lukew.com/ff/entry.asp?933

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 10: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Reduktion bedeutet mehr User Experience.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 11: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

LernbarkeitEinprägsamkeitEffektivitätEffizienzZufriedenstellung

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

User Experience:

Page 12: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Mobile Web ist einWachstumsmarkt.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 13: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Weltweiter Anteil von mobilen Endgeräten in Millionen.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

http://www.boxuk.com/blog/mobile-the-business-case

Page 14: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Anteil von mobilen Endgeräten mit einem Webbrowser.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

http://www.boxuk.com/blog/mobile-the-business-case

Page 15: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Anteil populärer Screengrößen mobiler Endgeräte.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

http://www.boxuk.com/blog/mobile-the-business-case

Page 16: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Die 3 Dimensionen mobiler Internetnutzung.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 17: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

ContextContentComponent

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 18: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Context

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 19: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Content:LesbarkeitNavigierbarkeitInteraktion

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 20: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Component

Page 21: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Mobile Nutzung bringt ein ganzes Set spezifischer Anforderungen und Möglichkeiten.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 22: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

‣ Unterschiedlichen Screengrößen‣ Inkonsistente Browser‣ Unterschiedliche Funktionen und Interfaces‣ Lange Ladezeiten‣ Zu kleine Navigationselemente‣ Fehlende Eingabemöglichkeiten, Plugins und

Scripte‣ schwache Prozessoren ‣ wenig RAM

Page 23: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Empfehlungen für die Praxis.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 24: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Anforderungen analysieren.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 25: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Zielgruppe kennen.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 26: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Verhalten der Nutzer im mobilen Web ist anders...

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 27: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

ContentConnectShare

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Für den Nutzer wichtig:

Page 28: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

weniger Design.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 29: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Wasserfallmodell

Page 30: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Informationsarchitektur optimieren.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 31: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Geringe Verschachtelungstiefe.

Page 32: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Navigations-Konzept entwickeln und auf das Ausgabemedium abstimmen.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 33: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 34: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 35: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 36: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Lineare Navigation und Breadcrumb als zusätzliche Orientierung.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 37: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Template Entwicklung.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 38: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

‣ Kein horizontales Scrolling‣ Anpassbare Screengröße‣ Lineare Navigation‣ Ausreichende Schriftgröße‣ Einfach zu bedienende Such- und

Formularfelder‣ Gracefull Degradation

Page 39: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Bildkonzept entwerfen.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 40: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Design auf das Ausgabemedium abstimmen.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 41: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Namics Blog, Testpage: Meine Website auf dem Handyhttp://blog.namics.com/2009/06/mobile-testpage.html

Page 42: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

http://mtld.mobi/emulator.php

Page 43: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Webstandards nutzen.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 46: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Usability testen.

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 48: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Danke für Ihre Aufmerksamkeit!

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Page 49: Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Fragen...E-Mail: [email protected]/peterrozekTwitter: @webinterfaceXING: https://www.xing.com/profile/Peter_Rozek

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

?