Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am making an app that involves a four-day schedule and a "signature" that certifies you are going to abide by the terms of the schedule. I would like to make the signature field look like a signature box on a paper document which means larger than a web input box and using bigger italic text to vaguely imitate a signature.

One added challenge is that between the scheduling field (meant to look more or less like Google Calendar's 4-day view) and the signature field is an extra line with some content summarizing the schedule above. The editable text will appear in bold and when you click it, it will turn into a more traditional looking input box and onblur it will return to regular text.

The way I want for the overall thing to look is that the schedule field plus content beneath should look like a printed document where the only thing to enter in pen is your signature.

1) Is that a good idea? 2) If so, how should I go about it?

Illustration below.

enter image description here

share|improve this question
1  
How do you sign it? Typing? Writing? Digital certificate? –  JohnGB Mar 22 '13 at 21:18
4  
While it's clear what you're aiming for here i.e. putting users through a process that makes them feel commitment to something, what you'll end up with is an unconventional web form. The user isn't technically "signing" anything (unless you're going incorporate digital IDs) so it's just another text input. You might be better off with a standard CTA button [Commit to Schedule] with an additional follow-up alert "Are you sure you want to commit? You are responsible... You can still edit... etc. etc. –  dennislees Mar 22 '13 at 21:24
    
I should add the client specifically wants a typed signature. I'm just trying to make it look appealing. –  JClaussFTW Mar 22 '13 at 21:27
add comment

2 Answers

up vote 9 down vote accepted

If the client really wants a typed "signature", and you're interested in making it look like a printed document, how about something like this?

A highlighted signature box with a standard signature line and some instructional placeholder text.

enter image description here

On clicking, the user gets a flashing cursor, a button to commit the change, and a way to cancel out of the action.

enter image description here

share|improve this answer
    
I think you're on to something there! Great idea. –  JClaussFTW Mar 22 '13 at 23:22
2  
And you probably also want to change the font-face of that element to some font resembling handwriting (such as Mistral or similar). This way it will feel even more like a "real" signature. –  Pasha S Mar 23 '13 at 2:06
add comment

I have to agree with dennislees and his comment, the usefulness of a virtual signature box is questionable. However, to work upon the design by dennislees, I suggest that you add a purely aesthetic "X" at the beginning of the 'sign here' box.

Mockup

Once again though, I don't really think it's necessary to make users sign their name when they can just check a box, and unless you use a digital certificate, it's no more legally binding than "I have read and I agree with these terms and conditions"

On the other hand, if you're going to be printing this off, maybe replacing a check-box with the user's name will have a similar effect once the schedule is ready to be printed

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.