Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ATEC 3361 | NTERNE| '
STUDIO

WEB FORM USABILITY
DESIGNING
USABLE FORMS

Prerentation adapted/ to/ >ied from An Extensive Guide To Web Form Usalzilily article lzyjuxtin M ...
WEB FORM USABILITY

Users Goals.  Websz'z‘ef0rm.  Organization’:  Goals.
Commerce
Community

Productivity

  

1
r»

 

4

":1: I-"$1 '3.-,2"

ii_fT‘. ’

Obtain lnfol
Buy

Maximize
Sales

E-Comme...
WEB FORM USABILITY

Two Aspects: 

Forms can make a website usable

Forms themselves need to be usable

     
   
   
    ...
WEB FORM USABILITY

Six Components of Forms: 

5 Massage ’ 0 Pit-Aserowewintoimaliontnatyauviaw entered

Labels

t. Lnb¢t ...
WEB FORM USABILITY

Three Aspects Of Forms

Relationship
Forms establish a relationship between

the user and the organiza...
WEB FORM USABILITY

Aspect 1: The Relationship

Based on trust
Has a goal

Name of the form based on its
purpose. 

Know y...
T2. 

  

I’”i"E:7i 

,  ‘ 37,3’

 

ll. 

W 71:. 

. t')V

 

 

7. I

“:1-‘$1

Aspect 1: The Relationship

"3t(4Il5

LOG...
WEB FORM USABILITY

Aspect 2: The Conversation

Not an interrogation
Order labels logically

Group related information
WEB FORM USABILITY

Aspect 2: The Conversation

Not an interrogation
Order labels logically

Group related information

Se...
WEB FORM USABILITY

Aspect 2: The Conversation

f Log in ,2 Create an Account

Create a Dropbox Account

One topic at a ti...
WEB FORM USABILITY

Aspect 3: The Appearance
WEB FORM USABILITY

Aspect 3: The Appearance

1. Labels

2. Input Fields
3. Actions

4. Help

5. Messages

6. Validation
Q‘
.  r 7

 LESSON IN A
 li 
77.72.77/3 of/1/01/rt form (I5

(I (012-vcwzzz. ‘/072.
SOURCES

btt . '// w'w'w. smasbin ma azine. com/2011/11/08/extensive-

}Jtt2.'/ /wrw-w.  lukew.  com/ resources/ web (form...
Upcoming SlideShare
Loading in …5
×

Web Form Usability

17,364 views

Published on

Presentation on Web Form Usability in ATEC 3361.501 Internet Studio 1.

Published in: Education
  • My brother found Custom Writing Service ⇒ www.HelpWriting.net ⇐ and ordered a couple of works. Their customer service is outstanding, never left a query unanswered.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/39sFWPG ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/39sFWPG ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Web Form Usability

  1. 1. ATEC 3361 | NTERNE| ' STUDIO WEB FORM USABILITY
  2. 2. DESIGNING USABLE FORMS Prerentation adapted/ to/ >ied from An Extensive Guide To Web Form Usalzilily article lzyjuxtin M 5'/ "sud. lyttp. ‘// rww-w. smax/ Jingmagazine. tom/2011/I1/08/extensive-guide-webfirm-u5al7i1i{y/
  3. 3. WEB FORM USABILITY Users Goals. Websz'z‘ef0rm. Organization’: Goals.
  4. 4. Commerce Community Productivity 1 r» 4 ":1: I-"$1 '3.-,2" ii_fT‘. ’ Obtain lnfol Buy Maximize Sales E-Commerce Checkout Fonn Join Community Grow & increase Engagement in the Community Social Networks Registration Fonns Get Things Done increase Content & Time Spent on Site Online Banking Transier of Funds
  5. 5. WEB FORM USABILITY Two Aspects: Forms can make a website usable Forms themselves need to be usable DBCOUNT KoalaMeat K Guaranteed tastiest koala toms on the wet Checkout :2 Step I of S I mm» cmumm Make this error message obvtous. othenmse 11 keep hrfhng submit and iuonderng what the hel went wrong And don‘? use an asterisk to mark requrred fielzt urkss rfs ggantic and bolded Fvfiqnuqgvzuuumdiamupagbaiyudfa-m slgnmhqvwilhnulqetcaebvatunnfiliuuyn p. w,. °,. , ' Password {confirm} ‘3 I: ’ Z39’! Va fl)! ‘ :1’! u£'D€’C2!! QIIOV PNO (MQICIIG . lU"Ct. ullic't ’V| .lrhI mid (-N1 0! IOUIQ
  6. 6. WEB FORM USABILITY Six Components of Forms: 5 Massage ’ 0 Pit-Aserowewintoimaliontnatyauviaw entered Labels t. Lnb¢t ‘ Firstnamr 2 | nputFIold j Justin YOU? Ollllll IGGYIIT badfimail Input Fields 6 Validation q Ernailadaress notvaliii Actions LII! name‘ Mitsud Repeal email‘ . . 4 Help I Byemull Cant read me Ext in ire box’ Help saved E . 9 , Relies! » Ltsbn Type the text above here‘ Messages _ I agree - Continue Helo
  7. 7. WEB FORM USABILITY Three Aspects Of Forms Relationship Forms establish a relationship between the user and the organization. Conversation They establish a dialogue between the user and the organization. Appearance By the way they look, they establish a relationship and a conversation.
  8. 8. WEB FORM USABILITY Aspect 1: The Relationship Based on trust Has a goal Name of the form based on its purpose. Know your users. Appropriate language. No extra questions. No sudden changes in behavior or appearance.
  9. 9. T2. I’”i"E:7i , ‘ 37,3’ ll. W 71:. . t')V 7. I “:1-‘$1 Aspect 1: The Relationship "3t(4Il5 LOG-IN I REGISTER VON C-:1-X Past ‘.5 :1 re: zicmi to shbo n t| '~ Dcbcrraws, but ll you doyo.1I1mdll1tul mal-1:5 shc Hm: aw: v ' M Dr. .i. =Jvr wvloamcrd alarwt-r'v ll you are a-4:3‘: v "bit lY. :'. V7J >- . » .3 cent $<'; lxvt ‘You Lng- - :3 rs": ~. the (~~. z<l . ,.: c«c~, s (*4! you In; zlcrcd mlh I39-in Kl‘ V. -we 2 *«: a:r veg-stcvccl Em: -I n: vc-.3 - . Pazsnzvd - . Fovgm~: ‘_g-. ;,'. . . .r__-_: _7 a f"'. '-. 1:». m debenhams. com Eu-. :.| addv<. ‘SS Com: w '(_-_, r puswovc comm , o.. crraul add-a. -ss »-11:1: wary crtcr you ‘log . .- ID emu address and msswoad vn nu: bow: Ingiuter my new cunmm) vassworc (rmmmum 6 a~. sracu-v5} 1* L Q. an'|3zon. com My 1-mull nflanu la: lo. I nm a nun! xunomu. ’ Vu, I have 5 pn-ward: Sign In Main F617;)! your runwurd’ ' may your n. - "in Address tnanqcd’ ‘. .~ ' amazon. com
  10. 10. WEB FORM USABILITY Aspect 2: The Conversation Not an interrogation Order labels logically Group related information
  11. 11. WEB FORM USABILITY Aspect 2: The Conversation Not an interrogation Order labels logically Group related information Select an ID and password Yahoo’ ID and Email Password Re-type Password In case you forget your ID or password. .. @ yahoo. com Chock F"aIs'-vc'd Sire-gin Altemale Email (optional) Secret Question 1 - Select one - Your Answer Secret Question 2 — Select one — Your Answer
  12. 12. WEB FORM USABILITY Aspect 2: The Conversation f Log in ,2 Create an Account Create a Dropbox Account One topic at a time. LJSI '1'1'Yl€ Natural pauses ' Pt15SWO’U I agree ID Dropbox 'ierms of Service Remove clutter New to Dropbox? Check out our tour
  13. 13. WEB FORM USABILITY Aspect 3: The Appearance
  14. 14. WEB FORM USABILITY Aspect 3: The Appearance 1. Labels 2. Input Fields 3. Actions 4. Help 5. Messages 6. Validation
  15. 15. Q‘ . r 7 LESSON IN A li 77.72.77/3 of/1/01/rt form (I5 (I (012-vcwzzz. ‘/072.
  16. 16. SOURCES btt . '// w'w'w. smasbin ma azine. com/2011/11/08/extensive- }Jtt2.'/ /wrw-w. lukew. com/ resources/ web (form desin. asp bttgs/ /w= w-w. forms! /Jatiwork. com/ bite. ‘// www. ureit. com/ eyetrackin/

×