Lecture 4 - Forms.docx

7 Pages
313 Views

Department
Computer Science
Course Code
Computer Science 1033A/B
Professor
Vivi Tryphonopoulos

This preview shows pages 1 and half of page 2. Sign up to view the full 7 pages of the document.
Description
Forms 4/23/2013 2:33:00 PM Lecture 4 Forms  Web forms – allow us to communicate about a service or a product that we are interested in  Valuable for the companies using them: o Commerce – increased purchases and maximize sales o Social – growing communities, use of third party ads o Productivity – increased manpower, product offerings, managing information, selling services Form Length  Forms have to communicate with one voice: o Must choose what components to keep, cut or postpone  One long page – when a form contains a large number of questions related to a single topic  Multiple pages – if a form contains a large number of questions that are related by a few topics Form Structure  Mobile devices: o Sequential – groups of questions that have to be asked to complete a task  Have to go through each question to get to the next  E.g. registration, checkout, anything requiring answers o Non-Linear – each possible input can be selected and edited in a separate screen or dialog  No need to go through each field, input can be separately modified  Get the person to the information they want to modify/remove quickly and easily o In-Context – Provide a way to quickly contribute without a lot of effort  Applies to those who want to contribute fast  Direct inline editing – contributing directly with one simple touch  E.g. comment boxes Path to Completion  Clear Path – straight linear path from top to bottom o Aligning input fields to show start to finish o Let them know where they are in the process o Eye Tracking – people most commonly scan down the left hand side of a webpage more than the right side  Two column form o Designed better for desktop, not mobile o Problem is that you can’t see the label so you don’t know what you're modifying on the smaller mobile screen  The solution is label alignment  Tabbing between input fields o 60% of users use the tab key to move between fields o Two column layout makes it difficult to know which box the tab key will take the user next  Not good for mobile devices  Input labels o Left-label alignment  Advantages:  Works well for when data required is unfamiliar – user can take more time to understand what is asked  Can easily scan labels  Requires less vertical space  Disadvantages  Less clear association between label and field because of distance  Changing label length may impair layout  Mobile – can’t see the question sometimes o Right-label alignment  Advantages  Clear association between label and field because of close distance  Requires less vertical space  Disadvantages  More difficult to scan labels  Faster completion times – 50% faster than left aligned labels o Top-aligned labels  Advantages  Data being collected is familiar  Even faster completion than left/right aligned  Easier to code (no tables)  Better format for mobile  Zooms into field on a smaller screen for easier entry  Disadvantage
More Less
Unlock Document

Only pages 1 and half of page 2 are available for preview. Some parts have been intentionally blurred.

Unlock Document
You're Reading a Preview

Unlock to view full version

Unlock Document

Log In


OR

Join OneClass

Access over 10 million pages of study
documents for 1.3 million courses.

Sign up

Join to view


OR

By registering, I agree to the Terms and Privacy Policies
Already have an account?
Just a few more details

So we can recommend you notes for your school.

Reset Password

Please enter below the email address you registered with and we will send you a link to reset your password.

Add your courses

Get notes from the top students in your class.


Submit