Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

HANDLICHE
DESIGNKONZEPTE
Konzeption, Usability und Umsetzung
mobiler Websites

PRÄSENTATION VON PETER ROZEK
THINKGREEN - NEUE MEDIEN

rozek.p@think-green.de

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

Handliche Designkonzepte / World Usability Day 2009 / Peter Rozek

Mythos und Wahrheit:
Mobiles Internet.


Mythos

Es gibt nicht das
mobile Internet!


Es gibt Unterschiedliche
Zugangsmöglichkeiten zum Internet!

Mythos

Mobile
Webdesign
ist kein
Webdesign
für das
iPhone.


Fokus auf eine
geräteunabhängige
Interaktion setzen.


Mobile Webdesign
setzt Reduktion voraus.


„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 First
http://www.lukew.com/ff/entry.asp?933


Reduktion
bedeutet mehr
User Experience.


User Experience:

Lernbarkeit
Einprägsamkeit
Effektivität
Effizienz
Zufriedenstellung


Mobile Web
ist ein
Wachstumsmarkt.


Weltweiter Anteil von mobilen Endgeräten in Millionen.
http://www.boxuk.com/blog/mobile-the-business-case


Anteil von mobilen Endgeräten mit einem Webbrowser.


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


Die 3 Dimensionen
mobiler
Internetnutzung.


Context
Content
Component


Context


Content:
Lesbarkeit
Navigierbarkeit
Interaktion


Component


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


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


Empfehlungen für die
Praxis.


Anforderungen
analysieren.


Zielgruppe kennen.


Verhalten der Nutzer
im mobilen Web ist
anders...


Für den Nutzer wichtig:

Content
Connect
Share


weniger Design.


Wasserfallmodell


Informationsarchitektur
optimieren.


Geringe Verschachtelungstiefe.


Navigations-Konzept
entwickeln und auf
das Ausgabemedium
abstimmen.


Lineare Navigation
und
Breadcrumb als
zusätzliche
Orientierung.


Template Entwicklung.


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


Bildkonzept entwerfen.


Design auf das
Ausgabemedium
abstimmen.


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


http://mtld.mobi/emulator.php


Webstandards nutzen.

3

http://ready.mobi/launch.jsp?locale=en_EN


Usability testen.


Danke für Ihre
Aufmerksamkeit!


?
Fragen...
E-Mail: rozek.p@think-green.de
slideshare.net/peterrozek
Twitter: @webinterface
XING: https://www.xing.com/proﬁle/Peter_Rozek

Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Ähnlich wie Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites (20)

Mehr von Peter Rozek

Mehr von Peter Rozek (20)

Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites