Who am I?
• Barcelona GDG Organizer
• NFC, Android and Agile Geek
• Android10.org
• NFC Actions App
• Flojack (@flomio)
• @fernando_cejas
• http://www.fernandocejas.com/
Slide 3
Slide 3 text
Agenda
• User Interface
• User Experience
• Usability
• Android Design Patterns
• Examples
• Advices
Slide 4
Slide 4 text
WTF?
Slide 5
Slide 5 text
WTF?
Slide 6
Slide 6 text
WTF?
Slide 7
Slide 7 text
What is User Interface? (UI)
• A common boundary or surface between the
interactive system and the user
• All elements which provide communication
between the interactive system and the user
Slide 8
Slide 8 text
Elements of a User Interface
Slide 9
Slide 9 text
What is User Interface Design?
• User interface design is the process of
supporting the tasks (goals) of the user, ideally
in a friendly and articulate manner
Slide 10
Slide 10 text
What about User Experience (UX)?
• “A person’s perceptions and responses that result
from the use or anticipated use of a product,
interactive system, or service.”
–ISO9241-210
Slide 11
Slide 11 text
What is Usability?
• Usability means that a person using a system
finds it easy to understand and use
• A usable system allows a person to focus on
their tasks, and not on the system itself
• A usable system most often does what a!
person expects
Slide 12
Slide 12 text
Usability Iceberg
Interaction Techniques
Keyboard and mouse
mappings, menus,
feedback, etc.
Visuals
Cues, feedback, and
aesthetics
Slide 13
Slide 13 text
Android Design Patterns
Slide 14
Slide 14 text
What is a Design Pattern?
• It’s a design solution to a recurring problem
• It’s also about not reinventing the wheel.
• People want to use what they have learnt
already using the phone
Slide 15
Slide 15 text
Things change… Isn’t it?
Slide 16
Slide 16 text
Ice Cream Sandwich! Android 4.0
• A big quality step
• Mature, stable and elegant
Slide 17
Slide 17 text
For Smartphones and Tablets
• Different devices have different usability
Slide 18
Slide 18 text
Android Main Themes
• Holo Light and Holo Dark
Slide 19
Slide 19 text
Gestures
Slide 20
Slide 20 text
Application Structure
Slide 21
Slide 21 text
Application Structure
Slide 22
Slide 22 text
Navigation with Back and Up
Slide 23
Slide 23 text
Action Bar
Slide 24
Slide 24 text
Action Bar
• Consider split it when
having many elements
Slide 25
Slide 25 text
Multi-pane Layouts
Slide 26
Slide 26 text
Multi-pane Layouts
Slide 27
Slide 27 text
Swipe Views
• Navigate with gestures through the content
Slide 28
Slide 28 text
Contextual Action Bar
Slide 29
Slide 29 text
Sliding Menu
• Replaces the dashboard? (deprecated?)
Slide 30
Slide 30 text
Pure Android
Slide 31
Slide 31 text
ActionBarSherlock
Slide 32
Slide 32 text
UI/UX Examples
Beautiful… Sweeeet!!!!
Slide 33
Slide 33 text
UI/UX Examples
Slide 34
Slide 34 text
UI/UX Examples
Slide 35
Slide 35 text
UI/UX Examples
Slide 36
Slide 36 text
Useful Links
• Android Design Official
• ActionBar Sherlock
• Nine Old Androids
• Android UI Patterns
Slide 37
Slide 37 text
Some advice…
• Don't port the UI from other platforms
• Don't override the behavior of system buttons
• Know your user and get feedback from him
• Test on real users, early and often
• Do what the user expects
• The most common operations should be visible
• Don't reinvent the wheel
Slide 38
Slide 38 text
Any questions?
Slide 39
Slide 39 text
Thanks!
When you look at the dark side, careful you
must be ... for the dark side looks back.
@fernando_cejas
www.fernandocejas.com