8

I have used click to edit fields for a html5 application which makes it slick to use on a desktop but I am not sure how the click-to-edit fields would be perceived by mobile users. Would it be appropriate to use click-to-edit fields for a mobile application?

P.S. :To clarify, by click-to-edit, I mean fields that are displayed as text (with some visual clues to indicate they are editable). When clicked, the text changes to an input field and reverts back to text after the user is done making changes and focusses out.

See this fiddle here for examples : JS FIDDLE WITH EXAMPLES OF CLICK-TO-EDIT FIELDS

Improve this question
3
  • 1
    What do you mean by "click-to-edit field"? A field displaying communicate "Click to edit" or something that switches to edit mode after it is clicked and does not show this affordance before?
    – Dominik Oslizlo
    Feb 13, 2014 at 21:34
  • @DominikOslizlo, See my edited/updated question for clarification. I have also added a jsfiddle with examples. Thanks.
    – Jarnal
    Feb 13, 2014 at 22:44
  • 1
    Thanks! I don't know if these will be less usable on mobile, but I think you should add some Edit button to the right. Dashed underline is not meaningful enough, it still looks like a link. Or, you can use text fields all the time, just alter them while in edit mode.
    – Dominik Oslizlo
    Feb 13, 2014 at 22:49

3 Answers 3

Reset to default
3

I am looking and typing this on my Nokia Lumia.

Your JSfiddle looks and works ok. However you need to make it clear that this is a editing page. The way in which it is currently styled it looks more like links.

Improve this answer
3
  • thanks for checking this out on the Lumia. Any suggestions/ideas on how visually clue in the user to the fact the fields are editable when clicked/touched, while still keeping a minimalist look? Adding text such as "click to edit this field" would clutter it up too much. On the desktop, I can add show a tooltip when the user hovers the mouse over the field, which should help make it clearer. However, on a mobile device, mouse-over/hover is not available, so it would need to be some other kind of visual clue.
    – Jarnal
    Feb 13, 2014 at 23:07
  • 1
    I think as long as it's clear they are on a "Edit Your Account Preferences" page it will be self explanatory. If they are on a "Your Account Page" then simply include once "click an item to edit".
    – tim.baker
    Feb 14, 2014 at 0:33
  • 1
    An additional reinforcement is for any fields where they haven't added anything perhaps in greyed out writing put "Tap to Add"
    – tim.baker
    Feb 14, 2014 at 0:34
3

It's probably workable, but note that a more typical UI is to have an 'edit' button that changes the page into an editable state as a whole. For example, on IOS:

enter image description here

My concern with tap-to-edit at the field level is that it could be a lot easier to select accidentally, which would trigger the keyboard, which could get annoying.

Improve this answer
4
  • 1
    I have to say I think the user experience of iOS alarms is utterly awful. For a company that strives to minimise the number of clicks there is an awful lot here.
    – tim.baker
    Feb 14, 2014 at 0:30
  • 1
    @tim.baker I don't think I'd disagree. That said, the screen was less about alarms and more about showing the somewhat common 'edit' button at the page level.
    – DA01
    Feb 14, 2014 at 0:45
  • @DA01, thanks, your point about user expectations for an "edit" button on iOS is well taken. Is this UI approach also generally true of third-party apps on iOS? Opinions on how this compares to the norm on Android are also welcome.
    – Jarnal
    Feb 14, 2014 at 4:16
  • @tim.baker, agree about number of clicks. Reducing clicks and UI buttons for a 'clean' look is one of the strong motivations for using click-to-edit, while at the same time, balancing it against established UI conventions and user expectations.
    – Jarnal
    Feb 14, 2014 at 4:19
0

I think this is the way to go on mobile because you are saving space and simplifying (if you have tested the functionality and it works). On mobile, people are learning more and more to tap to discover.

I would design the editable text to have a subtle flat button look, which would make it a bit more obvious. Or use a small edit icon.

Improve this answer

Your Answer

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

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