Ozan Can Çalı

SWE 551 – Lightweight Client Programming

Presented to: Roy Küçükateş

• To help developers design the best possible

user interface & user experience

What are UI Guidelines for?

User Interface:

A connection between equipment and people, which help people interact with the

system.

2 SWE513 - UI Design Guidelines

What does a good interface have?

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

efficiently

3 SWE513 - UI Design Guidelines

Types of User Interfaces

• GUI (graphical user interface) in use for years

• NUI (natural user interface) multi-touch, gesture, motion

• OUI (organic user interface) • BCI (brain-computer interface)

in great demand thanks to

smartphones

technologies of the future

4 SWE513 - UI Design Guidelines

Positive User Experience Principles

1) Make it fast

2) Make it clear

3) Make it easy

5 SWE513 - UI Design Guidelines

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

6 SWE513 - UI Design Guidelines

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

7 SWE513 - UI Design Guidelines

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!

8 SWE513 - UI Design Guidelines

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!

9 SWE513 - UI Design Guidelines

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!

10 SWE513 - UI Design Guidelines

5 Deadly Sins

5) Discrimination

– Design for a child & a 80-year-old

– Design for all platforms (especially for Android)

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

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) 12 SWE513 - UI Design Guidelines

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

13 SWE513 - UI Design Guidelines

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

14 SWE513 - UI Design Guidelines

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 / older iPhones

320 x 480 480 x 320

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)

16 SWE513 - UI Design Guidelines

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

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

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

18 SWE513 - UI Design Guidelines

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

19 SWE513 - UI Design Guidelines

• 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

Common Information on iPhone & Android UI

20 SWE513 - UI Design Guidelines

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 21 SWE513 - UI Design Guidelines

22 SWE513 - UI Design Guidelines

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/mobilehig/MobileHIG.pdf)

• The Age of the Interface by Richard Yonck / The Futurist Magazine,

May-June 2010

23 SWE513 - UI Design Guidelines