Inline editing - does it work on small screens?

Question

I am currently working on an app (phone size, not tablet yet) project that involves an extensive profile editing section. I am generally much in favour of inline editing patterns, as it removes the discrepancy between an editing view and how it’d look like on a page for a user, as well as limiting the amount of steps a user has to run through - it basically allows them to do all the editing needed on one page, without having to ever leave the page for previews.

BUT, I’m massively struggling to translate this into a mobile design pattern. “Consulting” some wide-reach examples of pages using inline editing (such as Twitter & LinkedIn), it seems like none of them use inline editing.

Are there any design patterns around that actually make sensible use of inline editing patterns, or does this introduce a layer of visual complexity that just simply does not work with a limited screen estate?

Answer 1

I think there are a few large considerations to keep in mind here:

1. How big is the edit area (both in width and height)? If it is to be usable, it has to be very easy for users to see where it begins and where it ends, and easy for them to avoid accidentally scrolling outside of its view (for example, if a user is editing her profile and she accidentally scrolls down to something she can't edit, hiding the form, there's an issue).
2. Where is/are the button(s) that users need to press for save, cancel, etc.? If it is possible for users to miss these because of the size of the text box, the design choices made around the text box, or the design choices around the buttons, it is likely to cause errors.
3. What is the mental model that users have for editing their profiles? Would they be pleased or confused by keeping editing and viewing without changing screens? This one could likely only be solved by watching users use it - with a prototype or something, preferably actually editing realistic-length text with it.
4. Where is the button for switching to the edit view, and does it sufficiently indicate what will happen when it is pressed? This would be a consideration either way.

These are the main ones I can think of off the top of my head, and they would cause me to be skeptical of that kind of inline editing, especially if a user's profile (either the entire screen, or the editable content), could be lengthy/require any scrolling.

Also, it's likely that Facebook's inline comment box works well because most comments are short, and because users (probably) view them as extending rather than editing the thing they're responding to.