hit3328 - chapter05 - working with forms

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


•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)



Left-Aligned Labels

Recommended method for phones

R. Vasa, 201116



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



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



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


Linear has slight misalignment

Table Layout offers better alignment

R. Vasa, 201121


Table Layout offers better alignment

But, default setting does not stretch columns

R. Vasa, 201122


Each View will be a new column in the

row

Each View will be a new column in the

row

R. Vasa, 201123


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


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


layout?





• 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


layout?





• 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


layout?





• 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


layout?





• 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


• 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 ...


Place Person object into an ArrayList for transport

Place Person object into an ArrayList for transport

R. Vasa, 201170

Sending the data back ....


Store Person object(s) in this IntentStore Person object(s) in this Intent

R. Vasa, 201171

Sending the data back


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)


R. Vasa, 201175

Methods are required by protocolMethods are required by protocol


R. Vasa, 201176

Private Constructor that we have to write



R. Vasa, 201177




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

hit3328 - chapter05 - working with forms

Technology

boston morning post

request code todetermine

manifest informs runtime

reduce label textsize

users scan form

code snippet

stores objects

input fieldright