The session gives a short overview of the evolution of mobile UI and focuses on new challenges around designing rich applications for smaller screens as well as having a user centric design approach. It outlines the design process and showcases some personal work examples. The talk is directed to everyone who wants to get an insight in a mobile design approach.

1. HOW TO
DESIGN FOR
MOBILE
Angela Naegele, GGM Berlin, Sept 14, 2012

2. MOBILE = DESIGN FOR
SMALL SCREENS
Angela Naegele, GGM Berlin, Sept 14, 2012

3. The Evolution of the Mobile Phone
Keyle Bean, Mobile Evolution
http://www.kylebean.co.uk
Angela Naegele, GGM Berlin, Sept 14, 2012

4. 5 Way Navigation +2 Established Standard
Nokia 7650 Navigation Buttons,
The Symbian Dev Zone,
http://www.wirelessdevnet.com/
Angela Naegele, GGM Berlin, Sept 14, 2012

5. iPhone The Start Of Modern Mobile Design
The Evolution of Cell Phone, iPhone 2G
http://www.webdesignerdepot.com
Angela Naegele, GGM Berlin, Sept 14, 2012

6. WHAT IS NEXT?
Angela Naegele, GGM Berlin, Sept 14, 2012

7. Playful Approaches Clear App
Clear iOS Application, review on
http://www.appsafari.com/notes/18518/clear/
Angela Naegele, GGM Berlin, Sept 14, 2012

8. WHY IS MOBILE
IMPORTANT?
Angela Naegele, GGM Berlin, Sept 14, 2012

9. Picture Nokia, Stephan Scheunig
CONTEXT
USER CONTENT
Angela Naegele, GGM Berlin, Sept 14, 2012

10. User-centered Design Approach
Jesse James Garrett, The Elements of User Experience
http://www.jjg.net/elements/pdf/elements_ch02.pdf
Angela Naegele, GGM Berlin, Sept 14, 2012

11. 1. STRUCTURE:
MOBILE INFORMATION
ARCHITECTURE
Angela Naegele, GGM Berlin, Sept 14, 2012

12. Limit opportunities. Keep it simple.
temp13rec.
Angela Naegele, GGM Berlin, Sept 14, 2012 http://www.flickr.com/photos/rehvonwald/3050285057/

13. 1st WAGON NEWS –
URBAN NEWSPAPER SHARING
Angela Naegele, GGM Berlin, Sept 14, 2012

14. Product Definition
Angela Naegele, GGM Berlin, Sept 14, 2012

15. IA is a bird eye‘s view.
Own Project
in cooperation with Michael Beck
Urban Newpaper Sharing App
Angela Naegele, GGM Berlin, Sept 14, 2012

16. 2. SKELETON:
WIREFRAMES &
USER FLOWS
Angela Naegele, GGM Berlin, Sept 14, 2012

17. Wireframes How Are Structure & Priorities?
Own Project
in cooperation with Michael Beck
Urban Newpaper Sharing App
T-Mobile 8:35 PM
Service Name
Sueddeutsche Zeitung
angeboten von Angela, vor 30 Sek
S7 Warschauer Str nach S7 Alexanderplatz
Noch wie neu.
Frankfurter Allgemeine Zeitung
angeboten von Damian, vor 1 Min
U2 Stadtmitte nach U2 Rosa-Luxemburg-Platz
Berliner Morgenpost
angeboten von Martin, vor 2 Min
U2 Stadtmitte nach U2 Rosa-Luxemburg-Platz
Financial Times Deutschland
angeboten von Michi, vor 4 Min
U2 Stadtmitte nach U2 Eberswalder Straße
Toller Artikel über Jogi Löw.
Liste Filter Profil
Angela Naegele, GGM Berlin, Sept 14, 2012

18. User Flows How Does It Behave?
Own Project
in cooperation with Michael Beck
Urban Newpaper Sharing App
T-Mobile 8:35 PM T-Mobile 8:35 PM T-Mobile 8:35 PM T-Mobile 8:35 PM
Service Name Angebot aufgeben Angebot veröffentlichen
Gespeicherte Angebote Von S Schönhauser Allee
Sueddeutsche Zeitung
Von S Schönhauser Allee nach S Warschauer Straße
angeboten von Angela, vor 30 Sek
S7 Warschauer Str nach S7 Alexanderplatz nach S Warschauer Straße Sueddeutsche Zeitung
Noch wie neu. Sueddeutsche Zeitung
Als Favorit gespeichert
Kommentar hinzufügen
Frankfurter Allgemeine Zeitung
angeboten von Damian, vor 1 Min
Von S Schönhauser Allee Angebot wurde
U2 Stadtmitte nach U2 Rosa-Luxemburg-Platz
nach U Stadtmitte erfolgreich veröffentlicht.
Berliner Morgenpost Sueddeutsche Zeitung
angeboten von Martin, vor 2 Min Kommentar hinzufügen
U2 Stadtmitte nach U2 Rosa-Luxemburg-Platz
Financial Times Deutschland
angeboten von Michi, vor 4 Min
U2 Stadtmitte nach U2 Eberswalder Straße
Toller Artikel über Jogi Löw.
Neues Angebot erstellen Angebot veröffentlichen
Liste Filter Profil
USE CASE USE CASE
“As a user I want to make an offer “As a user I want to save favorite
to sell my newspaper.“ routes to complete my task faster.“
Angela Naegele, GGM Berlin, Sept 14, 2012

19. 3. SURFACE:
VISUAL DESIGN
Angela Naegele, GGM Berlin, Sept 14, 2012

20. Who Do You Want To Be?
einfach, schnell, gebraucht, zuverlässig, solide, seriös,
unterstützend, informativ, evolutionär, innovativ, live,
fortschrittlich, täglich, nicht verstaubt, intuitiv, relevant,
haptisch, mobil, aktuell, jetzt, qualitativ hochwertige
Inhalte, Austausch, News, Diskussion, zirkulieren, klar,
dynamisch, wiederkehrend, persönlich, effektiv, flexibel,
unterwegs, glaubwürdig, professionell
Angela Naegele, GGM Berlin, Sept 14, 2012

21. What Are The Main Elements?
dynamisch
sachlich, emotional,
zuverlässig evolutionär
statisch
Angela Naegele, GGM Berlin, Sept 14, 2012

22. Use The Basic Design Elements
Angela Naegele, GGM Berlin, Sept 14, 2012

23. Coming Soon …
Angela Naegele, GGM Berlin, Sept 14, 2012

24. Thank You!
www.angela-naegele.de
Angela Naegele, GGM Berlin, Sept 14, 2012