CS 160
User Interfaces
Fall 2014
Andrew Fang
andrewbfang@berkeley.edu
OH:11-12 Thursday 611 Soda
Feedback
• tinyurl.com/better160
Agenda
• Administrivia
• Heuristic Evaluation
• Location API
• Flickr API
Administrivia
Mandatory Section
• Mandatory attendance next section
• No excuses, no makeups
• Signup via wejoinin
• 5 minute pitch, 5 minute critique
• 4 slides (intro + idea1+ idea2 + idea3)
• Each idea slide: idea name + user group
Programming Assignment 2
• Register for an API key in Flickr
• https://www.flickr.com/services/apps/create/apply
• Non-comercial
• Tag your photos “cs160fsm”
• Get Started
Heuristic Evaluation
Heuristic Evaluation
• What is it used for?
• Examine the interface and find usability problems
• How many evaluators?
• Usually a set of 3-5 evaluators
• Why multiple?
• Different people find different problems
• Evaluators only communicate afterwards to assure
independent and unbiased evaluations
Nielsen’s 10 Heuristics
1. Visibility of System Status
2. Match system and real world
3. User control and freedom
4. Consistency and standards
5. Error Prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, recover from errors
10. Help & documentation
Visibility of System Status (Feedback)
Form feedback
Unclear feedback
Progress bar
Match System & Real World (Metaphor)
User control and freedom (Navigation)
Slingshot
Messenger
Calendar
IFTT
Consistency & Standards (Consistency)
Error Prevention (Prevention)
“Sign In” Inactive
Clear “action item”
No clear “action item”
Recognition > Recall (Memory)
Typeahead
Font previews
Recent Searches
Flexibility & Efficiency of Use (Efficiency)
Gmail Shortcuts
Detects Location
Aesthetic and minimalist design (Design)
Mailbox
Airbnb
Hyperlapse
Recognize, Diagnose, and Recover from
Errors
404 Pages
Yahoo Email
Help & Documentation
Mailbox
Tips on iOS8
Carousel Help
Android Location API
LocationManager
• Provides access to the system location services
• Allows periodic updates of geographic location for your application
• Use LocationListener to request for updates:
public void requestLocationUpdates(provider, minTime, minDistance, listener)
AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />
MyActivity.java
LocationManager locationManager = (LocationManager) this.getSystemService(Context.LOCATION_SERVICE);
locationManager.requestLocationUpdates(LocationManager.NETWORK_PROVIDER, 5000, 0, locationListener);
LocationListener
• Used for receiving notifications from the LocationManager when the
location has changed
• onLocationChanged(Location location) fires when location changes
• onProviderDisabled(String provider) fires when provider is disabled
• onStatusChanged(String provider, int status, Bundle extras) fires
when status of provider changes
Android Location Demo
http://goo.gl/qIneib
Flickr API
UI Thread
• AKA the main thread of execution
• Dispatches events
• Executes most of your code (onCreate, onPause, onDestroy, onClick)
• Anything that changes the UI (like drawing) has to happen here
• Database Queries, HTTP requests may block UI thread
Don’t Block the UI Thread
• Use AsyncTask
• doInBackground runs on a separate thread
• Create a new Thread
• thread.start()
• Handler h = new Handler();
• handler.post()
APIs
• Application Programming Interface
• Simplify
• Access of private processes through public methods
Flickr API keys
• Register yourself as a developer
• Api Key - GET
• Api Secret - POST
FlickrJ
• https://code.google.com/p/flickrj-android/
• GET
API_KEY in FlickrHelper.java
Flickr flickr=new Flickr(API_KEY,rest);
PhotosInterface photosInterface=flickr.getPhotosInterface();
PhotoList photoList=photosInterface.search(searchParams,20,1);
• POST
API_SECRET in FlickrHelper.java
Intent intent = new Intent(getApplicationContext(), FlickrjActivity.class);
intent.putExtra(KEY, fileUri.getAbsolutePath());
Flickr Demo
http://tinyurl.com/FlickrTestApp
Heuristic Evaluation
Activity
Activity Time
1. Visibility of System Status
2. Match system and real world
3. User control and freedom
4. Consistency and standards
5. Error Prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recover from errors
10. Help & documentation
Activity Time
1. Visibility of System Status
2. Match system and real world
3. User control and freedom
4. Consistency and standards
5. Error Prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recover from errors
10. Help & documentation
Activity Time
1. Visibility of System Status
2. Match system and real world
3. User control and freedom
4. Consistency and standards
5. Error Prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recover from errors
10. Help & documentation
Activity Time
1. Visibility of System Status
2. Match system and real world
3. User control and freedom
4. Consistency and standards
5. Error Prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recover from errors
10. Help & documentation
Activity Time
1. Visibility of System Status
2. Match system and real world
3. User control and freedom
4. Consistency and standards
5. Error Prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recover from errors
10. Help & documentation