Principles: Usability

1. CS569 Selected Topics in Software EngineeringSpring 2012 Principles: Usability

2. Key usability principles • Keep it simple • Keep it responsive • Follow guidelines and patterns • Adequate aesthetics so as not to hurt usability • Easy to install and start using

3. Keep it simple • There should be a primary task supported • And a clear, 100% obvious path for that task • 90/10 rule • 90% of users will use only 10% of the features • In fact, when you make a mobile+desktop app, design for the mobile screen first • And then add features for the other platform(s)

4. Example: Skype for Android http://www.youtube.com/watch?feature=player_embedded&v=1o6TBezfSpU Notice that the UI makes the right path obvious: • Click Skype icon; Skype shows list of contacts • User clicks contact name; Skype shows profile • User clicks Skype call or Skype video call button

5. Keep it responsive • Responsiveness != performance • Does the app react quickly vsdoes the system complete work quickly/scalably • Main key: Do long operations asynchronously • E.g., network operations, big database operations • E.g., In Android, use IntentReceiver to perform small chunks of work; use Service for long tasks • E.g., In JavaScript, use function objects, closures, and events and/or setTimeout()

6. Performing a long task • Acknowledge input immediately • Show user the progress so far • Show user estimate of how long to wait • Let user do work while waiting for long tasks • Let users cancel long-running tasks 80% complete

7. Important UI guidelinesprovided by Apple • Give People a Logical Path to Follow • Elevate the Content that People Care About • Minimize the Effort Required for User Input • De-emphasize Settings and File-Handling • Make Search Quick and Rewarding • Use UI Elements Consistently • Delight People with Stunning Graphics • Handle Orientation Changes • Ask People to Save Only When Necessary

8. iOS guidelines related to widgets • Status bar: is for showing status • Don’t hide it unless you have a really good reason • Navigation bar: is for navigating • Should have a “back”-like button if appropriate • Toolbar: is for tools • Usually bottom of screen • Tab bar: is for switching between views

9. For the full guidelines • http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html • http://developer.android.com/guide/practices/ui_guidelines/index.html

10. User interface patterns • Users become accustomed to doing tasks in certain ways within mobile apps • User interface patterns describe common ways of laying out the screen for tasks • So users can find stuff and don’t get confused • Different than Design Patterns • Structure of UI vs. structure of code

11. Example: Popup invitation • Situation: App developer wants user to make it easy for user to visit app (website) frequently • Design: Provide a popup box inviting the user to add the app to home http://www.flickr.com/photos/brettlider/4964755483/sizes/m/in/photostream/

12. Other common UI patterns • Dashboard • Empty data set – invite user • Live search • Login / authentication • Menu of operations • Navigation widget • Profile screen • Settings screens • Splash screens • User profile screen

13. Places to go for UI patterns • http://androidpttrns.com/ • http://inspired-ui.com/ • http://mobile-patterns.com/ • http://pttrns.com/ • http://www.androiduipatterns.com/ • http://www.lovelyui.com/ • http://www.mobiledesignpatterngallery.com/ • http://www.patternsofdesign.co.uk/

14. Aesthetics • Aesthetics is not directly about usability • Aesthetics is how “pretty” or “pleasing” it is • Usability is how well people can use it • But it is possible for apps to be so tragically ugly that their very ugliness hurts usability

15. Elements of aesthetics • Graphics and that jazz should never distractfrom functionality or content • Provide obvious but unobtrusivenavigation • Balance visual weight across screen • Use consistency, repetition and proximityto show groups of conceptually similar items • Use contrast to emphasize differences

16. Example #1 My Courses CS561: Software engineering Taken in Fall 2012 from Jensen, C Grade of A Utilize software engineering methodology in a team environment to develop a real-world application. Teams will be responsible for all phases of software development, including project planning, requirements analysis, design, coding, testing, configuration management, quality assurance, documentation, and delivery. Two-term sequence required. • CS561: Software engineering • CS562: Applied software engineering • CS569: Special topics in software engineering • CS584: Human factors in programming languages Add another registered course Machine learning on the cloudAdvanced e-commerceSoftware and job creationFPGA programming Add another wishlist course 75 34 Back

17. Example #2 CS561 My Courses Courses + 7534 Registered Software engineering CS561: Software engineeringCS562: Applied software engi…CS569: Special topics in softw…CS584: Human factors in prog… Term taken: Fall 2012 Your grade: AInstructor: Jensen, C. Description Utilize software engineering methodology in a team environment to develop a real-world application. Teams will be responsible for all phases of software development, including project planning, requirements analysis, design, coding, testing, configuration management, quality assurance, documentation, and delivery. Two-term sequence required. Over all terms,all instructors Wish list Machine learning on the cloudAdvanced e-commerceSoftware and job creationFPGA programming

18. Of course… The usability of an app is immaterialif nobody can even figure out how to install it.

19. Easy to install and start using • It should be trivially easy for a user to • Find your app • Install your app • Start using your app

20. Discoverability Some tips for naming your app (Courtesy of NetMagazine) • Two-part name: distinctive and memorable • Authentic: not a “knock-off” of existing app • Clear: say what your app does • Short: under 11 characters And, obviously, use words related to the app’s purpose so it shows up in search results.

21. Other ways to get app discovered • Word-of-mouth • E.g., provide rewards in app for people who tell their friends • Strategic partnerships: mutual benefits • E.g., Get your app reviewed by bloggers; you want to get a lot of buzz (test for scalabilty beforehand) • Advertise • E.g., iAd, AdMob, or even DoubleClick (websites)

22. Install-ability • The easiest apps to install are web apps • Do you really need to make a native app? • Good reasons: performance, native APIs • Webapps can be bookmarked onto home page • And can even have a nifty little icon! • Free apps are far more likely to be installed • Consider monetizing via ads + in-app purchases

23. Easing the installation • Keep the installation lean • E.g., Don’t package in media such as video and big images unless most users will need them • Bundle different media for different device sizes • Defer downloads of media only some users need • Don’t crash on install • Common problem: requiring installation via iTunes(why on earth, I can’t imagine)

24. Start using-ability • Don’t crash on first startup • Fail gracefully if network is unavailable • Test on lots of different devices • Avoid requiring user to set settings to start • Obvious path for primary task(which is where I started this lecture!)

25. Key usability principles • Keep it simple • Design for a primary task • Keep it responsive • Asynchronicity for long tasks • Follow guidelines and patterns • Adequate aesthetics so as not to hurt usability • Easy to install and start using • Discoverability • Install-ability • Start using-ability

26. Extra credit opportunity (1XC) • Find 3 ways that the PSS application could be improved by applying the usability principles on the previous slide • For each of 3 ways, write 3 sentences (total of 9 sentences): • Principle: What principle would you apply? • Violation: What areas of the PSS code violate the principle? • Modification: How would you modify the PSS code? • Add a 10th sentence stating that you did not discuss this with any classmates, and that you worked on it alone • Create a PDF with your 10 sentences (should be less than 1 page long) and upload to Blackboard (under XC uploads)