9

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?

  • 1
    On a small screen space the concept of a 'page' will be different for the user compared to tablet or desktop. Also, having to deal with touch interactions makes inline editing less than ideal if you have to do a lot of it. I think there are more than enough constraints to make it difficult to work well for your situation. – Michael Lai Jun 30 '14 at 0:17
  • The closest thing I can think of is the long-press on a Facebook comment that you've previously made. Even that isn't really inline. I think the problem with inline editing on mobile would be one of affecting a detectable state change. – Imperative Jun 30 '14 at 17:32
  • 1
    I did find a few examples of smartphone apps now... the apps I could find were.. Heyday, Everest, Whisper, Steller, Secret, and (in a way) Snapchat – Andreas Wolters Jul 1 '14 at 8:54
4

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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