9

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

3
  • 1
    How do you sign it? Typing? Writing? Digital certificate?
    – JohnGB
    Commented Mar 22, 2013 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
    Commented Mar 22, 2013 at 21:24
  • I should add the client specifically wants a typed signature. I'm just trying to make it look appealing.
    – JClaussFTW
    Commented Mar 22, 2013 at 21:27

2 Answers 2

9

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

2
  • I think you're on to something there! Great idea.
    – JClaussFTW
    Commented Mar 22, 2013 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
    Commented Mar 23, 2013 at 2:06
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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