3

I am working on an iOS app for hotels, allowing users to take reservations, check in/out, assign rooms, etc.

Main Issue: In the included mock up, there is no indication for when a field is editable vs read-only. I'm concerned users will experience tap fatigue when trying to figure out what they can and cannot edit.


  • The Status, Arrival, Departure, Room, and Guest Notes fields are editable and reveal pickers/text inputs when tapped
  • Reservation Total, Reservation ID and Received are read-only

The Guests section is mixed:

  • Fred Jensen slides in a new screen with more info when tapped, which is then editable (address, phone, etc.)
  • Jimmy Jensen is read-only (b/c he's not the primary reservation holder)

One solution is to have an Edit button in the global nav bar. Like the native iOS Contacts app, it would only show the editable fields. The downside is that it adds 1 more tap to the workflow; tapping Edit and then tapping on the desired field.

Is there an established convention for this issue iOS design? Any suggestions?

mockup

  • 1
    FYI, Jimmy is not a woman's name. – plainclothes Jan 30 '16 at 0:02
  • @plainclothes Why do you expect to see a woman's name? Jimmy is even referenced as a man ("he's not the...") in the prose description. – msanford Jan 30 '16 at 3:58
  • 1
    @msanford because in the wireframe "Jimmy" has the female icon next to his name. – plainclothes Jan 30 '16 at 4:41
  • Interesting that you interpreted the icon as meaning female. It is actually supposed to mean child. I probably need to revisit that icon. – Maizello Feb 1 '16 at 18:24
2

The convention on iOS seems to be that if a field is editable, it'll have a disclosure arrow ( > ), and tapping that field slides in a new view where you can enter a new value or select from a list of options (for example, see Settings > General > About).

You've already used a disclosure arrow in the Guests section, so I'd suggest just being consistent and carrying that through to the other editable fields: Status, Arrival, Departure, etc. That way, the user can tell which fields are editable and which aren't at a glance, and you avoid the need for a separate Edit mode, which is clumsy.

  • Thanks for the suggestion. My only difficulty with that is that I need a UI pattern to indicate when tapping on a field will reveal further information (i.e. the arrow next to Fred Jensen reveals his contact info) vs when tapping on a field will allow the user to edit the field. Any thoughts on this? – Maizello Feb 1 '16 at 18:23
0

I would make data in non-editable fields a medium gray. You want to visually differentiate the editable fields from the editable data (which should stay black).

Alternately you could inset a small edit-icon (diagonal pencil) after the field title or next to the editable data.

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.