HIT3328 - Chapter05 - Working with Forms
Upcoming SlideShare
Loading in...5
×
 

HIT3328 - Chapter05 - Working with Forms

on

  • 187 views

 

Statistics

Views

Total Views
187
Views on SlideShare
187
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HIT3328 - Chapter05 - Working with Forms HIT3328 - Chapter05 - Working with Forms Presentation Transcript

  • HIT3328 / HIT8328 Software Development forMobile DevicesDr. Rajesh Vasa, 2011Twitter: @rvasaBlog: http://rvasa.blogspot.com1Lecture 05Working withForms
  • R. Vasa, 20112Lecture Overview•Short Recap (previous weeks)•Principles of Mobile Form Design•Saving Form Data and Passing MessagesBack
  • R. Vasa, 20113Android App. is made ofActivitiesActivityView GroupViews(Layout)
  • R. Vasa, 20114UI Interaction Handling Pattern•Component.setOn......Listener ( handler)•E.g. button.setOnClickListener•Handler is an anonymous inner class•On...Listener handler = newOn....Listener() {}
  • R. Vasa, 20115Bundle stores simple stateinformationBundleBundleputString(key, value)putDouble(key, value)putInt(key, value)putStringArray(key, value[])It is a Key, Value store system(like a Hash Table or a Hash Map)Code Snippet:state.putString("inputTemperature", inputTemp);Code Snippet:state.putString("inputTemperature", inputTemp);
  • R. Vasa, 20116A Key Design Different (iOS VsAndroid)Activity-AActivity-AActivity-CActivity-CActivity-BActivity-BUIAppDelegateUIAppDelegateUIViewController-UIViewController-AAUIViewController-UIViewController-BBUIViewController-UIViewController-CCApplicatiApplicationonUIAppDelegate has LifeCycleActivities havea parentapplicationActivity has Life CycleApplication is NOTmanaged directly bythe O/SLife Cycle => Managed by OperatingSystemView Controllers aremanaged by the Appinternally
  • R. Vasa, 20117Manifest XML - What is it?Manifest informs Runtime about the App.Manifest informs Runtime about the App.
  • R. Vasa, 20118Controlling Input Type(Android)•Android has a large number of options•You can merge them to create morecomplex input typestextUritextEmailAddresstextPasswordtextPersonNamenumbernumberSignednumberDecimalnumberPasswordtextUritextEmailAddresstextPasswordtextPersonNamenumbernumberSignednumberDecimalnumberPasswordandroid:inputTypeandroid:inputType
  • R. Vasa, 20119Sending an Async. MessageAndroid uses an asynchronous messagingmodel (known as Intents) to send messagesbetween ActivitiesAndroid uses an asynchronous messagingmodel (known as Intents) to send messagesbetween Activities
  • R. Vasa, 201110A Typical Scenario•User is required to provide information in aform when booking an airline ticket.•For example: Name, Address, DOB•High-Level Solution:•Design a form•Get user to fill in data•Pass data around screens•Store the data
  • R. Vasa, 201111Lecture Overview•Short Recap (previous weeks)•Principles of Mobile Form Design•Saving Form Data & Passing Messages Back
  • R. Vasa, 201112Questions Arise when designingforms•What is the best way tolayout?•How many fields should weput per screen?•How can we capture dataquickly?•Should the screen offerscrolling? or be a wizard?•Do we put a ‘Submit’button?•If so, where?
  • R. Vasa, 201113Layout on mobile phones ishardIn Landscape -- fieldsappear to use too muchspaceIn Landscape -- fieldsappear to use too muchspaceNeeds to scroll, buthow does the userknow?Needs to scroll, buthow does the userknow?Do we need OK/Cancelbuttons?Do we need OK/Cancelbuttons?
  • R. Vasa, 201114Layout Options - Which isideal?Labels above Input FieldRight-Aligned LabelsLeft-Aligned Labels
  • R. Vasa, 201115Label Layout (UsabilityResearch)Labels above Input FieldRight-Aligned LabelsLeft-Aligned LabelsRecommendedmethod for phones
  • R. Vasa, 201116Label Layout (UsabilityResearch)Labels above Input FieldEye tracking showsthat user can focus onboth the label and fieldat the same timeEye tracking showsthat user can focus onboth the label and fieldat the same timeTrade-Off: Need more vertical space -- which is ata premiumOffers rapid-processing with least confusion
  • R. Vasa, 201117Label Layout (UsabilityResearch)Right-Aligned LabelsUsers scan form before enteringdata (when presented like this)Users scan form before enteringdata (when presented like this)Advantage is in terms of space usedTrade-Off: Reduces reading speed (of labels)
  • R. Vasa, 201118Label Layout (UsabilityResearch)Left-Aligned LabelsAdvantage is in terms of space used,label scanning is easyUsers scan form before enteringdata (when presented like this)Users scan form before enteringdata (when presented like this)Trade-Off: Gap between label andfield can be very large for some fields
  • R. Vasa, 201119Improving Layout withTableLayout...The layout of these blocks is not perfect(it has been done with spaces in a Linear layout)
  • R. Vasa, 201120Improving Layout withTableLayout...Linear has slightmisalignmentTable Layoutoffers betteralignment
  • R. Vasa, 201121Improving Layout withTableLayout...Table Layoutoffers betteralignmentBut, default setting does not stretch columns
  • R. Vasa, 201122Improving Layout withTableLayout...Each View will be anew column in therowEach View will be anew column in therow
  • R. Vasa, 201123Improving Layout withTableLayout...Table Layout offers control overcolumnsAll columns stretchedSecond columnonly stretchedUseful Tip: Columns can be weighted to offer morecontrolUseful Tip: Columns can be weighted to offer morecontrol
  • R. Vasa, 201124Improving Layout withTableLayout...Stretch second column (zero indexed)Stretch second column (zero indexed)Stretch all columns equallyStretch all columns equally
  • R. Vasa, 201125Table Layout is Flexibleandroid:stretchColumns="0,2,4"You can stretch a sub-set of columnsandroid:shrinkColumns="2"Shrink the third column (zero indexed)android:collapseColumns="0"Get rid of the first columnRows can have different number of columnsViews can be placed without TableRow
  • R. Vasa, 201126Questions Arise when designingforms•What is the best way tolayout?•How many fields shouldwe put per screen?•How can we capture dataquickly?•Should the screen offerscrolling? or be a wizard?•Do we put a ‘Submit’button?•If so, where?
  • R. Vasa, 201127UX Principle - Read-TapAsymmetry•This principle is related to Touch Interfaces•We all have ‘fat fingers’ -- compared to themouse pointer•The (common) touch size is 1cm x 1cm•Any area on a screen that we want users totouch (to interact) has to be one square cm•Interestingly, we can read text that is far toosmall to ‘touch’ --> Read-Tap Asymmetry
  • R. Vasa, 201128UX Principle - Read-TapAsymmetry•We can read text that is too small to ‘touch’•This principle can be used to our advantage:•Make labels smaller than for input fields•Error messages can be added between fieldsLabel can be read at smaller sizes (to a point)Errors, can beaddedErrors, can beadded
  • R. Vasa, 201129Using Read-Tap AsymmetryLabels set to 24sp Labels set to 14spIn Forms, we can reduce label textsize, while keeping input field size atunchangedIn Forms, we can reduce label textsize, while keeping input field size atunchanged
  • R. Vasa, 201130Label Size Manipulation hasLimitsLabels set to 14spConsider the above situation (with10sp) for app. used by older agegroups (e.g. 75+)Consider the above situation (with10sp) for app. used by older agegroups (e.g. 75+)Labels set to 10sp
  • R. Vasa, 201131How small can a label size be?Labels set to 14sp Labels set to 10spThe only safe way to determine thesmallest possible label size is to undertakeUsability testing(user background and abilities matter)The only safe way to determine thesmallest possible label size is to undertakeUsability testing(user background and abilities matter)
  • R. Vasa, 201132Using Simple Styles•In the form design example:•The field label sizes can bealtered directly•Time consuming/errorprone to adjust many labels•An easier andrecommended approach isto use styles•We define a style and usethat consistently throughout the app.
  • R. Vasa, 201133What is a style?•A style allows us to create a commonresource and use it across the app.XML file storedunder valuesXML file storedunder values
  • R. Vasa, 201134Creating Simple StylesWhite, Bold, Left aligned, 25sp size
  • R. Vasa, 201135Using the Style<TextViewandroid:text="First Name:"android:id="@+id/firstNameTextView"style="@style/FormLabel"android:layout_width="wrap_content"android:layout_height="wrap_content"></TextView>Styles are set directly (no android:)
  • R. Vasa, 201136Impact of the Style<TextViewandroid:text="First Name:"android:id="@+id/firstNameTextView"style="@style/FormLabel"android:layout_width="wrap_content"android:layout_height="wrap_content"></TextView>
  • R. Vasa, 201137Impact of the Style<TextViewandroid:text="First Name:"android:id="@+id/firstNameTextView"style="@style/FormLabel"android:layout_width="wrap_content"android:layout_height="wrap_content"></TextView>You can move layoutwidth/height as well to thestyleYou can move layoutwidth/height as well to thestyle
  • R. Vasa, 201138Questions Arise when designingforms•What is the best way tolayout?•How many fields should weput per screen?•Should the screen offerscrolling? or be a wizard?•How can we capture dataquickly?•Do we put a ‘Submit’button?•If so, where?
  • R. Vasa, 201139Scrolling Long Forms is Ideal•Users are getting used to quickly scrollingon a mobile phone
  • R. Vasa, 201140Scrolling Views•Can make any Layout (View Group) scroll byencapsulating it inside a ScrollViewandroid:scroll.... properties offerfine-grained control (e.g. control the delaybefore scroll bars fade out)android:scroll.... properties offerfine-grained control (e.g. control the delaybefore scroll bars fade out)
  • R. Vasa, 201141Questions Arise whendesigning forms•What is the best way tolayout?•How many fields should weput per screen?•Should the screen offerscrolling? or be a wizard?•How can we capture dataquickly?•Do we put a ‘Submit’button?•If so, where?
  • R. Vasa, 201142Entering Data into a MobileForm•Typically this is via a soft-keyboardSoft Keyboardautomaticallypops-upIssue: Where is the“TAB” button to navigateto the next field?
  • R. Vasa, 201143Input Method Framework•The framework offers Input Method Editor(IME) - users can select their preferredmethod• Soft Keypad or Hardware Keypad• Multiple vendors offer IME’sSwiftkey Swype
  • R. Vasa, 201144IME can be customised toimprove UXDefaultCustomisedto showNextCustomisedto showNextUseful Factoid: TAB key is not provided bydefaultUseful Factoid: TAB key is not provided bydefault
  • R. Vasa, 201145Customising IME<EditText android:layout_width="match_parent"android:id="@+id/firstNameText"android:imeOptions="actionNext"android:text="" android:layout_height="wrap_content"></EditText>Many IMEoptionsareavailableNext ButtonUseful Factoid: iOS also offers similarcustomisationUseful Factoid: iOS also offers similarcustomisation
  • R. Vasa, 201146Soft Keyboards cover thescreenIssue: By default, youcannot scroll the form ifthe soft keyboard isdisplayed
  • R. Vasa, 201147Soft Keyboards cover thescreenTo make form resize andscroll properly, while softkeyboard is visible youneed to adjust theActivity in Manifest
  • R. Vasa, 201148Questions Arise when designingforms•What is the best way tolayout?•How many fields should weput per screen?•Should the screen offerscrolling? or be a wizard?•How can we capture dataquickly?•Do we put a ‘Submit’button?•If so, where?
  • R. Vasa, 201149Short Problem - To Cancel ornot!•Context: Android has a ‘Back’ button, iOSdoes not -- but has a back-nav icon at thetop of the screen in general.•Situation: A single screen (scrolling) form.•Design Question:•Do you need both the Submit and Cancelbuttons?•A more general question:•Do you really need a ‘Cancel’ button on webforms?
  • R. Vasa, 201150Short Problem - Do you need toOK?•Does your mobile phone offer an “OK”button when changing contact information?•Is the OK/Submit button needed at all?•When would you create an explicit ‘Submit’button?•Key Point: Question the need for every UIcomponent on a mobile device.(Useless?) Factoid: The first recorded use of the word “OK” was on 23March 1839 on the second page of the Boston Morning Post. via@ThinkQuarterly(Useless?) Factoid: The first recorded use of the word “OK” was on 23March 1839 on the second page of the Boston Morning Post. via@ThinkQuarterly
  • R. Vasa, 201151Short Problem - Do we tip?•What are the design choices available if youwant to show some help information to theusers as they are filling in the form.•Will tool tips work? (If so, how?)•Do you show a “?” symbol next to eachfield?•Do you put a “help” button per each form atthe top / bottom of the screen?
  • R. Vasa, 201152We can add a hint for an inputfield•The aim of a tool-tip is to offer a shorthint as to the function.•Android/iOS allow hints for views wheretext is emptyandroid:hint="AU state or territory name"android:hint="AU state or territory name"Hint is removed as soon as field gains focus
  • R. Vasa, 201153Buttons and Tool Tips on TouchDevices•Buttons cannot offer a tool tip•There is no mouse to hover over a button•The only way to know the function of abutton is to click it and find out•This situation presents issues,•Can the user ‘undo’ an action?•May be cause for concern in an app. thatoffers mobile banking•The only way out is to ‘Confirm Action’
  • R. Vasa, 201154Should we confirm everyaction?•The heuristic is very simple:•Can the user undo (or) change their mindwith minimal penalty?•Example 1: Making a mistake enteringcontact information. Can be corrected viathe edit option. So, no confirmation requiredwhen saving.•Example 2: Booking an airline ticket. Messyto undo (or) change once committed.Hence, confirm action.
  • R. Vasa, 201155UX Guideline - Make is possible toundo•User should have the option to change theirmind for all actions.•Design to ensure that mistakes are notpenalised heavily.•This applies even to the airline ticketbooking.•Example: Google Android Market allowsusers to return purchases 15 minutes afterinstall is complete (was 48 hours before)•Mainly to cover issues where app. does notwork on their device
  • R. Vasa, 201156How do we display an errormessage?•Displaying errors on mobile forms is anon-trivial task•Aim to reduce potential errors at input•Use input type restriction•Show potential options (via a drop-down asyou type)•When input has to be validation and errorshown -- consider a message in small font
  • R. Vasa, 201157Examples (look ma, nolabels...)
  • R. Vasa, 201158More example (no labels)Maybe, labels are not always important!
  • R. Vasa, 201159Examples (mix-n-match)Do we reallyneed theselabels?Are theyobvious?Did you know you can takea picture by clicking on thecamera?
  • R. Vasa, 201160Lecture Overview•Short Recap (previous weeks)•Principles of Mobile Form Design•Saving Form Data & Message Passing
  • R. Vasa, 201161Sending Data Back to CallerBackThe simplest option is to use a Bundle (esp. for primitives)can also send Objects back (but involves more w
  • R. Vasa, 201162Expecting Data (What isinvolved?)•Activities communicate asynchronously•They send e-mail like messages to eachother•When we start an activity, we need toindicate that we are expecting a result(explicitly)Expecting a result Unique code
  • R. Vasa, 201163Expecting Data Back (What isinvolved?)Unique codeCode can be any integer.Needed to know which activity we are sending backthe result toCode can be any integer.Needed to know which activity we are sending backthe result to
  • R. Vasa, 201164Receiving the DataCall back methodRequest Code that wesent when activity wasstartedWe use the request code todetermine which activity is callingbackWe use the request code todetermine which activity is callingback
  • R. Vasa, 201165Extracting the DataData is packaged in theIntentWe obtain data from a Parcel(like a Bundle, but stores objects)We obtain data from a Parcel(like a Bundle, but stores objects)
  • R. Vasa, 201166The Object that is passed -PersonSimple data holder
  • R. Vasa, 201167Person ObjectSimple data holder also has toString() method
  • R. Vasa, 201168Sending the data back ...Do this when “Back” button is pressedCreate an Intent (message) to be sentbackCreate an Intent (message) to be sentback
  • R. Vasa, 201169Sending the data back ...Do this when “Back” button is pressedPlace Person object into an ArrayList fortransportPlace Person object into an ArrayList fortransport
  • R. Vasa, 201170Sending the data back ....Do this when “Back” button is pressedStore Person object(s) in this IntentStore Person object(s) in this Intent
  • R. Vasa, 201171Sending the data backDo this when “Back” button is pressedSend (intent message) back to thecallerSend (intent message) back to thecaller
  • R. Vasa, 201172The Magic Behind the Scenes•Sadly, there is a bit of messy code thatmakes all of this work.
  • R. Vasa, 201173Parcel Protocol (moredetails)...This constant has to be created and namedCREATORThis constant has to be created and namedCREATOR
  • R. Vasa, 201174Person (object we want to movearound)Person (object we want to movearound)Parcel Protocol (moredetails)...
  • R. Vasa, 201175Methods are required by protocolMethods are required by protocolParcel Protocol (moredetails)...
  • R. Vasa, 201176Private Constructor that we haveto writePrivate Constructor that we haveto writeParcel Protocol (moredetails)...
  • R. Vasa, 201177Private Constructor that we have towritePrivate Constructor that we have towriteParcel Protocol (moredetails)...
  • R. Vasa, 201178What if we have complex data?•What if we need to send a more complexblock of data back?•We will have to look at other options•Potential options:•Shared Preferences (environment variables)•External SQL database•Application object
  • R. Vasa, 201179References•On Screen Inputs•http://developer.android.com/resources/articles/on-screen-inputs.html•What users really see -- results from an eyetracking study•http://repository.library.csuci.edu/handle/10139/3017