hit3328 - chapter05 - working with forms
DESCRIPTION
TRANSCRIPT
HIT3328 / HIT8328 Software Development for Mobile DevicesDr. Rajesh Vasa, 2011
Twitter: @rvasa Blog: http://rvasa.blogspot.com
1
Lecture 05Working with
Forms
R. Vasa, 20112
Lecture Overview
•Short Recap (previous weeks)
• Principles of Mobile Form Design
•Saving Form Data and Passing Messages Back
R. Vasa, 20113
Android App. is made of Activities
Activity
View Group
Views(Layout)
R. Vasa, 20114
UI Interaction Handling Pattern
•Component.setOn......Listener ( handler )
• E.g. button.setOnClickListener
•Handler is an anonymous inner class
• On...Listener handler = new On....Listener() {}
R. Vasa, 20115
Bundle stores simple state information
BundleBundle
putString(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, 20116
A Key Design Different (iOS Vs Android)
Activity-AActivity-A
Activity-CActivity-C
Activity-BActivity-B
UIAppDelegateUIAppDelegate
UIViewController-UIViewController-AA
UIViewController-UIViewController-BB
UIViewController-UIViewController-CC
ApplicatiApplicationon
UIAppDelegate has Life Cycle
Activities have a parent
application
Activity has Life Cycle Application is NOT managed directly by
the O/SLife Cycle => Managed by Operating System
View Controllers are managed by the App
internally
R. Vasa, 20117
Manifest XML - What is it?
Manifest informs Runtime about the App.Manifest informs Runtime about the App.
R. Vasa, 20118
Controlling Input Type (Android)•Android has a large number of options
•You can merge them to create more complex input types
textUritextEmailAddresstextPasswordtextPersonNamenumbernumberSignednumberDecimalnumberPassword
textUritextEmailAddresstextPasswordtextPersonNamenumbernumberSignednumberDecimalnumberPassword
android:inputTypeandroid:inputType
R. Vasa, 20119
Sending an Async. Message
Android uses an asynchronous messaging model (known as Intents) to send messages
between Activities
Android uses an asynchronous messaging model (known as Intents) to send messages
between Activities
R. Vasa, 201110
A Typical Scenario
•User is required to provide information in a form 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, 201111
Lecture Overview
•Short Recap (previous weeks)
•Principles of Mobile Form Design
•Saving Form Data & Passing Messages Back
R. Vasa, 201112
Questions Arise when designing forms•What is the best way to
layout?
•How many fields should we put per screen?
•How can we capture data quickly?
•Should the screen offer scrolling? or be a wizard?
•Do we put a ‘Submit’ button?
• If so, where?
R. Vasa, 201113
Layout on mobile phones is hard
In Landscape -- fields appear to use too much
space
In Landscape -- fields appear to use too much
space
Needs to scroll, but how does the user
know?
Needs to scroll, but how does the user
know?
Do we need OK/Cancel buttons?
Do we need OK/Cancel buttons?
R. Vasa, 201114
Layout Options - Which is ideal?
Labels above Input Field
Right-Aligned Labels
Left-Aligned Labels
R. Vasa, 201115
Label Layout (Usability Research)
Labels above Input Field
Right-Aligned Labels
Left-Aligned Labels
Recommended method for phones
R. Vasa, 201116
Label Layout (Usability Research)
Labels above Input Field
Eye tracking shows that user can focus on both the label and field
at the same time
Eye tracking shows that user can focus on both the label and field
at the same time
Trade-Off: Need more vertical space -- which is at a premium
Offers rapid-processing with least confusion
R. Vasa, 201117
Label Layout (Usability Research)
Right-Aligned Labels
Users scan form before entering data (when presented like this)
Users scan form before entering data (when presented like this)
Advantage is in terms of space used
Trade-Off: Reduces reading speed (of labels)
R. Vasa, 201118
Label Layout (Usability Research)Left-Aligned Labels
Advantage is in terms of space used, label scanning is easy
Users scan form before entering data (when presented like this)
Users scan form before entering data (when presented like this)
Trade-Off: Gap between label and field can be very large for some fields
R. Vasa, 201119
Improving Layout with TableLayout...
The layout of these blocks is not perfect(it has been done with spaces in a Linear layout)
R. Vasa, 201120
Improving Layout with TableLayout...
Linear has slight misalignment
Table Layout offers better alignment
R. Vasa, 201121
Improving Layout with TableLayout...
Table Layout offers better alignment
But, default setting does not stretch columns
R. Vasa, 201122
Improving Layout with TableLayout...
Each View will be a new column in the
row
Each View will be a new column in the
row
R. Vasa, 201123
Improving Layout with TableLayout...
Table Layout offers control over columns
All columns stretched
Second column only stretched
Useful Tip: Columns can be weighted to offer more control
Useful Tip: Columns can be weighted to offer more control
R. Vasa, 201124
Improving Layout with TableLayout...
Stretch second column (zero indexed)Stretch second column (zero indexed)
Stretch all columns equallyStretch all columns equally
R. Vasa, 201125
Table Layout is Flexible
android:stretchColumns="0,2,4"You can stretch a sub-set of columns
android:shrinkColumns="2"Shrink the third column (zero indexed)
android:collapseColumns="0"Get rid of the first column
Rows can have different number of columns
Views can be placed without TableRow
R. Vasa, 201126
Questions Arise when designing forms•What is the best way to
layout?
•How many fields should we put per screen?
•How can we capture data quickly?
•Should the screen offer scrolling? or be a wizard?
•Do we put a ‘Submit’ button?
• If so, where?
R. Vasa, 201127
UX Principle - Read-Tap Asymmetry• This principle is related to Touch Interfaces
• We all have ‘fat fingers’ -- compared to the mouse pointer
• The (common) touch size is 1cm x 1cm
• Any area on a screen that we want users to touch (to interact) has to be one square cm
• Interestingly, we can read text that is far too small to ‘touch’ --> Read-Tap Asymmetry
R. Vasa, 201128
UX Principle - Read-Tap Asymmetry•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 fields
Label can be read at smaller sizes (to a point)
Errors, can be added
Errors, can be added
R. Vasa, 201129
Using Read-Tap Asymmetry
Labels set to 24sp Labels set to 14sp
In Forms, we can reduce label text size, while keeping input field size at
unchanged
In Forms, we can reduce label text size, while keeping input field size at
unchanged
R. Vasa, 201130
Label Size Manipulation has Limits
Labels set to 14sp
Consider the above situation (with 10sp) for app. used by older age
groups (e.g. 75+)
Consider the above situation (with 10sp) for app. used by older age
groups (e.g. 75+)
Labels set to 10sp
R. Vasa, 201131
How small can a label size be?
Labels set to 14sp Labels set to 10sp
The only safe way to determine the smallest possible label size is to undertake
Usability testing(user background and abilities matter)
The only safe way to determine the smallest possible label size is to undertake
Usability testing(user background and abilities matter)
R. Vasa, 201132
Using Simple Styles
• In the form design example:
• The field label sizes can be altered directly
• Time consuming/error prone to adjust many labels
•An easier and recommended approach is to use styles
• We define a style and use that consistently through out the app.
R. Vasa, 201133
What is a style?
•A style allows us to create a common resource and use it across the app.
XML file stored under values
XML file stored under values
R. Vasa, 201134
Creating Simple Styles
White, Bold, Left aligned, 25sp size
R. Vasa, 201135
Using the Style
<TextView android: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, 201136
Impact of the Style
<TextView android:text="First Name:" android:id="@+id/firstNameTextView"style="@style/FormLabel"android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
R. Vasa, 201137
Impact of the Style
<TextView android:text="First Name:" android:id="@+id/firstNameTextView"style="@style/FormLabel"android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
You can move layout width/height as well to the
style
You can move layout width/height as well to the
style
R. Vasa, 201138
Questions Arise when designing forms•What is the best way to
layout?
•How many fields should we put per screen?
•Should the screen offer scrolling? or be a wizard?
•How can we capture data quickly?
•Do we put a ‘Submit’ button?
• If so, where?
R. Vasa, 201139
Scrolling Long Forms is Ideal
•Users are getting used to quickly scrolling on a mobile phone
R. Vasa, 201140
Scrolling Views
•Can make any Layout (View Group) scroll by encapsulating it inside a ScrollView
android:scroll.... properties offer fine-grained control (e.g. control the delay
before scroll bars fade out)
android:scroll.... properties offer fine-grained control (e.g. control the delay
before scroll bars fade out)
R. Vasa, 201141
Questions Arise when designing forms•What is the best way to
layout?
•How many fields should we put per screen?
•Should the screen offer scrolling? or be a wizard?
•How can we capture data quickly?
•Do we put a ‘Submit’ button?
• If so, where?
R. Vasa, 201142
Entering Data into a Mobile Form•Typically this is via a soft-keyboard
Soft Keyboard automatically
pops-up
Issue: Where is the “TAB” button to navigate
to the next field?
R. Vasa, 201143
Input Method Framework
• The framework offers Input Method Editor (IME) - users can select their preferred method
• Soft Keypad or Hardware Keypad
• Multiple vendors offer IME’s
Swiftkey Swype
R. Vasa, 201144
IME can be customised to improve UX
Default
Customised to show
Next
Customised to show
Next
Useful Factoid: TAB key is not provided by default
Useful Factoid: TAB key is not provided by default
R. Vasa, 201145
Customising IME
<EditText android:layout_width="match_parent" android:id="@+id/firstNameText"android:imeOptions="actionNext"android:text="" android:layout_height="wrap_content">
</EditText>
Many IME options
are available
Next Button
Useful Factoid: iOS also offers similar customisation
Useful Factoid: iOS also offers similar customisation
R. Vasa, 201146
Soft Keyboards cover the screen
Issue: By default, you cannot scroll the form if
the soft keyboard is displayed
R. Vasa, 201147
Soft Keyboards cover the screen
To make form resize and scroll properly, while soft keyboard is visible you
need to adjust the Activity in Manifest
R. Vasa, 201148
Questions Arise when designing forms•What is the best way to
layout?
•How many fields should we put per screen?
•Should the screen offer scrolling? or be a wizard?
•How can we capture data quickly?
•Do we put a ‘Submit’ button?
• If so, where?
R. Vasa, 201149
Short Problem - To Cancel or not!•Context: Android has a ‘Back’ button, iOS
does not -- but has a back-nav icon at the top of the screen in general.
•Situation: A single screen (scrolling) form.
•Design Question:
• Do you need both the Submit and Cancel buttons?
•A more general question:
• Do you really need a ‘Cancel’ button on web forms?
R. Vasa, 201150
Short Problem - Do you need to OK?•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 UI component on a mobile device.(Useless?) Factoid: The first recorded use of the word “OK” was on 23
March 1839 on the second page of the Boston Morning Post. via @ThinkQuarterly
(Useless?) Factoid: The first recorded use of the word “OK” was on 23 March 1839 on the second page of the Boston Morning Post. via
@ThinkQuarterly
R. Vasa, 201151
Short Problem - Do we tip?
•What are the design choices available if you want to show some help information to the users as they are filling in the form.
• Will tool tips work? (If so, how?)
• Do you show a “?” symbol next to each field?
• Do you put a “help” button per each form at the top / bottom of the screen?
R. Vasa, 201152
We can add a hint for an input field•The aim of a tool-tip is to offer a short
hint as to the function.
•Android/iOS allow hints for views where text is empty
android:hint="AU state or territory name"android:hint="AU state or territory name"
Hint is removed as soon as field gains focus
R. Vasa, 201153
Buttons and Tool Tips on Touch Devices
•Buttons cannot offer a tool tip
• There is no mouse to hover over a button
• The only way to know the function of a button 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. that offers mobile banking
• The only way out is to ‘Confirm Action’
R. Vasa, 201154
Should we confirm every action?•The heuristic is very simple:
• Can the user undo (or) change their mind with minimal penalty?
•Example 1: Making a mistake entering contact information. Can be corrected via the edit option. So, no confirmation required when saving.
•Example 2: Booking an airline ticket. Messy to undo (or) change once committed. Hence, confirm action.
R. Vasa, 201155
UX Guideline - Make is possible to undo
•User should have the option to change their mind for all actions.
•Design to ensure that mistakes are not penalised heavily.
• This applies even to the airline ticket booking.
•Example: Google Android Market allows users to return purchases 15 minutes after install is complete (was 48 hours before)
• Mainly to cover issues where app. does not work on their device
R. Vasa, 201156
How do we display an error message?•Displaying errors on mobile forms is a
non-trivial task
•Aim to reduce potential errors at input
• Use input type restriction
• Show potential options (via a drop-down as you type)
•When input has to be validation and error shown -- consider a message in small font
R. Vasa, 201157
Examples (look ma, no labels...)
R. Vasa, 201158
More example (no labels)
Maybe, labels are not always important!
R. Vasa, 201159
Examples (mix-n-match)
Do we really need these
labels?
Are they obvious?
Did you know you can take a picture by clicking on the
camera?
R. Vasa, 201160
Lecture Overview
•Short Recap (previous weeks)
• Principles of Mobile Form Design
•Saving Form Data & Message Passing
R. Vasa, 201161
Sending Data Back to Caller
Back
The simplest option is to use a Bundle (esp. for primitives)
We can also send Objects back (but involves more work)
R. Vasa, 201162
Expecting Data (What is involved?)•Activities communicate asynchronously
• They send e-mail like messages to each other
•When we start an activity, we need to indicate that we are expecting a result (explicitly)
Expecting a result Unique code
R. Vasa, 201163
Expecting Data Back (What is involved?)
Unique code
Code can be any integer.Needed to know which activity we are sending back
the result to
Code can be any integer.Needed to know which activity we are sending back
the result to
R. Vasa, 201164
Receiving the DataCall back method Request Code that we
sent when activity was started
We use the request code to determine which activity is calling
back
We use the request code to determine which activity is calling
back
R. Vasa, 201165
Extracting the DataData is packaged in the
Intent
We 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, 201166
The Object that is passed - Person
Simple data holder
R. Vasa, 201167
Person Object
Simple data holder also has toString() method
R. Vasa, 201168
Sending the data back ...
Do this when “Back” button is pressed
Create an Intent (message) to be sent back
Create an Intent (message) to be sent back
R. Vasa, 201169
Sending the data back ...
Do this when “Back” button is pressed
Place Person object into an ArrayList for transport
Place Person object into an ArrayList for transport
R. Vasa, 201170
Sending the data back ....
Do this when “Back” button is pressed
Store Person object(s) in this IntentStore Person object(s) in this Intent
R. Vasa, 201171
Sending the data back
Do this when “Back” button is pressed
Send (intent message) back to the caller
Send (intent message) back to the caller
R. Vasa, 201172
The Magic Behind the Scenes
•Sadly, there is a bit of messy code that makes all of this work.
R. Vasa, 201173
Parcel Protocol (more details)...
This constant has to be created and named CREATOR
This constant has to be created and named CREATOR
R. Vasa, 201174
Person (object we want to move around)
Person (object we want to move around)
Parcel Protocol (more details)...
R. Vasa, 201175
Methods are required by protocolMethods are required by protocol
Parcel Protocol (more details)...
R. Vasa, 201176
Private Constructor that we have to write
Private Constructor that we have to write
Parcel Protocol (more details)...
R. Vasa, 201177
Private Constructor that we have to write
Private Constructor that we have to write
Parcel Protocol (more details)...
R. Vasa, 201178
What if we have complex data?
•What if we need to send a more complex block of data back?
• We will have to look at other options
• Potential options:
• Shared Preferences (environment variables)
• External SQL database
• Application object
R. Vasa, 201179
References
•On Screen Inputs
• http://developer.android.com/resources/articles/on-screen-inputs.html
•What users really see -- results from an eye tracking study
• http://repository.library.csuci.edu/handle/10139/3017