Ozan Can Çalı

SWE 551 – Lightweight Client Programming

Presented to: Roy Küçükateş
 What are UI Guidelines for?
• To help developers design the best possible
user interface & user experience

User Interface:
A connection between equipment and
people, which help people interact with the
system.

SWE513 - UI Design Guidelines 2

What does a good interface have?

• intuitiveness
• ease of use
• ability to handle tasks more
efficiently

SWE513 - UI Design Guidelines 3

 Types of User Interfaces
• GUI (graphical user interface)  in use for years

• NUI (natural user interface) in great demand

 multi-touch, gesture, thanks to
motion smartphones

• OUI (organic user interface) technologies

• BCI (brain-computer interface) of the future

SWE513 - UI Design Guidelines 4

Positive User Experience
Principles

1) Make it fast
2) Make it clear
3) Make it easy

SWE513 - UI Design Guidelines 5

 5 Deadly Sins
1) Sloth
– Be fast and responsive
– Give immediate feedback to the user
– Give feedback for every user action
– Never make the user think the application has
crashed, even if it does!
– max. response time: 5 seconds
– Broadcast receiver in max 10 seconds
– Users perceive a lag longer than 100 to 200 ms

SWE513 - UI Design Guidelines 6

 5 Deadly Sins
– Prefer lists to textboxes

– Use Threads and AsyncTasks within Services

– People want to make adjustments / enter

information only once at the beginning

– Minimize required inputs, try to find info yourself!

– Give users a logical path to follow

SWE513 - UI Design Guidelines 7

 5 Deadly Sins
2) Gluttony
– Use memory responsibly, this is not a desktop
application!
– Memory management
– If you can do it with less memory, then do it so! -
no matter how hard it is!

SWE513 - UI Design Guidelines 8

 5 Deadly Sins
3) Hostility
– The customer is always right!
– Provide positive user experience
– Respect the expectations
– Stick to the procedures and guidelines
– Do not try to teach users new things, let them use
the way they know
– Always utilize native icons, the back button, the
menu button
– Users like to touch everything on the screen and
see interaction! Also, invite touches!
SWE513 - UI Design Guidelines 9
 5 Deadly Sins
4) Arrogance
– Do not fight the system!
– Do not use untrusted APIs
– No hard-coding! Put them into the resources
file!
– Do it the recommended/usual way, not the way
you like  this is not your personal app!

SWE513 - UI Design Guidelines 10

 5 Deadly Sins
5) Discrimination
– Design for a child & a 80-year-old
– Design for all platforms (especially for Android)

SWE513 - UI Design Guidelines http://erictric.com/tag/android/ 11

 Key Points for a Good App. Dev.
1) Beauty
- Aesthetic integrity: Good
balance of the appearance &
functionality of the interface

- Focus is ALWAYS on content, but

without a decent quality of the
app-artwork, the content will
not be easily consumable

2) Generosity  share + consume

- Let your app interact with other
apps
(i.e Babylon iPhone app interacts
with Biletix web app)
SWE513 - UI Design Guidelines 12
Key Points for a Good App. Dev.
3) Ubiquity  app should be
more than an icon; i.e put a
widget on the home screen
about an interesting feature
4) Utility  be useful, be
interesting, try to be the
both!
-Utilize innovations such as live
wallpapers!

http://www.androidal.pl/widgety-na-android-15/1042

SWE513 - UI Design Guidelines 13

Technical Information on iPhone UI

• Status bar: at the upper edge

– Display the status bar as much as possible!
• Navigation bar:
below the status bar
• Toolbar: at the bottom edge
• Tab bar: at the bottom edge

• Make the minimum size of a tappable

element 44x44 px
SWE513 - UI Design Guidelines 14
Screen sizes of some iOS-based
devices (in pixels)
Device Portrait Landscape

iPhone 4 640 x 960 960 x 640

iPad 768 x 1024 1024 x 768

iPod touch /
320 x 480 480 x 320
older iPhones
Technical Information on Android UI

Design with respect to different screen

resolutions of different devices:

• LDPI (low density screen)

• MDPI (medium density screen)
• HDPI (high density screen)

SWE513 - UI Design Guidelines 16

Technical Information on Android UI
• Dashboard
– quick intro about app
– include the most used features
– highlight new content
– full screen
– organize (by features, categories or accounts)
• Action Bar
– together with title bar

SWE513 - UI Design Guidelines http://newsrob.blogspot.com/ 17

Technical Information on Android UI
• Quick actions
– popup window from an onscreen target (similar to
popover in iPad / Facebook)
– make it compact – easy to manipulate

if this is clear enough

label is not needed

SWE513 - UI Design Guidelines 18

Technical Information on Android UI
• Search bar
– if provided, partially overlaps the action bar when
activated
– a quick action node next to search bar
– keyboard appears when activated

• Companion widget
– show the key functionality of the app in the home
screen, too

SWE513 - UI Design Guidelines 19

 Common Information on iPhone &
Android UI
• Users see one screen at a time (an app has
a single window but can have multiple
screens)
• Orientation can change, landscape
orientation should be both-sided!
• Add physicality and realism! (the voice
recorder may look like a real microphone)
• Do not fill the form with a lot of elements
• Do not ask a lot of questions (regarding
updates, saving etc.)
• Icons: app & store icons + launch images
required
SWE513 - UI Design Guidelines 20
 Common Information on iPhone &
Android UI
• Use every possible technology to make the
app more appealing (gestures, sensors,
multitasking)

• Start instantly

• Always be prepared to stop

• Never quit an app programatically

SWE513 - UI Design Guidelines 21
SWE513 - UI Design Guidelines 22
 References
• Google I/O 2010 – A Beginner’s Guide to Android
(http://www.youtube.com/watch?v=yqCj83leYRE)
• Google I/O 2010 – Android UI Design Patterns
(http://www.youtube.com/watch?v=M1ZBjlCRfz0)
• Android Developers Center – SDKs, UI Design Guidelines
(http://developer.android.com)
• IPhone User Interface Guidelines
(http://www.upsidelearning.com/blog/index.php/2010/06/24/iphone-user-interface-
guidelines-part-i/ )
• iOS Human Interface Guidelines
(http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobile
hig/MobileHIG.pdf)
• The Age of the Interface by Richard Yonck / The Futurist Magazine,
May-June 2010

SWE513 - UI Design Guidelines 23