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 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

share|improve this question
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 at 21:34
    
@DominikOslizlo, See my edited/updated question for clarification. I have also added a jsfiddle with examples. Thanks. –  Jarnal Feb 13 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 at 22:49

3 Answers 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.

share|improve this answer
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 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 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 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 at 4:19

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.

share|improve this answer
    
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 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 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 at 0:34

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.

share|improve this answer

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.