Chapter 3
Web Interface Design
3.1 In Page Editing
Introduction
Designing Web Interfaces
• Principle One: Make It Direct
• Principle Two: Keep It Lightweight
• Principle Three: Stay on the Page
• Principle Four: Provide an Invitation
• Principle Five: Use Transitions
• Principle Six: React Immediately
Make It Direct
In-Page Editing
Drag and Drop
Direct Selection
Introduction
Single-Field Inline Edit
Editing a single line of text.
Multi-Field Inline Edit
Editing more complex information.
Overlay Edit
Editing in an overlay panel.
.
Introduction
Table Edit
Editing items in a grid.
Group Edit
Changing a group of items directly.
Module Configuration
Configuring settings on a page directly.
Make It Direct
• In-Page Editing
• Drag and Drop
• Direct Selection
In-Page Editing
In-Page Editing
In-Page Editing
Challenges associated with In-Page
Editing
Discoverability
• Just how discoverable is this feature? In the example, there are a number of cues that
invite the user to edit. The invitations include:
• Showing a tool tip (“Click to edit”)
• Highlighting the background of the editable area in yellow
• Changing the cursor to an edit cursor (I-beam)
• But all these cues display after the user pauses the mouse over the title (mouse hover).
• Discoverability depends on the user hovering over the title and then noticing these
invitations.
Challenges associated with In-Page
Editing
Discoverability
• To make the feature more discoverable, invitational cues could be included directly
in the page. For example, an “edit” link could be shown along with the title.
• How do you think the users are going to discover that the name field will become
editable once you click inside it? Not without someone telling them or them
accidentally discovering it.
Challenges associated with In-Page
Editing
Discoverability
• By showing the link at all times, the edit feature would be made more discoverable.
• But this has to be balanced with how much visual noise the page can
accommodate. Each additional link or button makes the page harder to process and
can lead to a feature not being utilized due to the sheer volume of features and their
hints shown on the page.
Challenges associated with In-Page
Editing
Challenges associated with In-Page
Editing
Challenges associated with In-Page
Editing
• Accessibility
Another concern that arises from inline editing is the lack of accessibility. Accessibility
affects a wider range of users than one might first consider.
• Assistive technologies help those with physical impairments, medical conditions,
problems with sight, and many other conditions.
Multi-Field Inline Edit
• The pattern Multi-Field Inline Edit 1. Label: Labels are sentence case and are as short as
describes this approach: editing possible, while clearly describing the content of the field.
multiple values inline
2. Text field: When in edit mode, the field snaps to the
width of the column and the text remains aligned with the
label. When in an empty state, this field is labeled as 'none'.
3. Control trigger: Indicates that actions are available in the
field.
4. Controls: Always appear to the right of the field.
5. Validation icon: Select an appropriate icon.
Readability versus editability
Readability versus editability
You will see this design
in action on Linkedin.
If you click on any of
the Edit icons while
you are editing your
Education details on
your profile, the entire
region will get replaced
with editable fields.
Readability versus editability
• Readability is a primary concern during display. But the best way to present editing is
with the common input form. The user will need some or all of the following:
• Edit controls
• Field prompts
• Help text for user input
• Error handling
• Assistive input (e.g., calendar pop up or drop-down selection field)
• Editing styles (e.g., edit fields with 3D sunken style)
Overlay Edit
• Overlay Edit patterns bring the editing form just a layer above the page.
• While still not leaving the page for editing, it does not attempt to do the editing directly
in the flow of the page. Instead a lightweight pop-up layer (e.g., dialog) is used for the
editing pane.
Overlay Edit
• What we observe here??
Why to consider Overlay ?
• An overlay should be considered when:
• The editing module is considerably larger than the display values.
• Opening an area on the page for the editing module would be distracting or push
important information down the page.
• There is concern that the opened information might go partially below the fold.
• An overlay can be positioned to always be visible in the page.
• One want to create a clear editing area for the user. Etc.,
Table Edit
• Editing tables of data is less common in consumer web applications but in enterprise
web applications, however, tables reign supreme.
• The most common request is for the table editing to work like Microsoft Excel, which
long ago set the standard for editing data in a grid. A good example of Table Edit is a
Google Docs Spreadsheet.
Group Edit
• To keep the display of items on the page as uncluttered as possible while still
supporting editing, consider using a single mechanism to enter a special editing mode:
Group Edit.
Group Edit
• Google Analytics uses group edit. Click the Edit icon on any of the regions on the
dashboard to get a popup with all the editable fields.
Module Configuration
• Popular portal sites like Yahoo! and Google’s interactive home page display specific
content modules (e.g., Top Stories).
• Module Configuration is a common pattern on these types of sites. Instead of modifying
modules on a separate page, the sites provide ways to directly configure the amount and
type of content that shows in each module.
• Putting edit links on each module can be visually noisy. An alternative approach is to
use the Group Edit pattern.
Guidelines for Choosing Specific Editing
Patterns
• Whenever you have a single field on the page that needs editing, consider using the
Single-Field Inline Edit.
• For multiple fields or more complex editing, use the Multi-Field Inline Edit.
• If you don’t need inline context while editing, or the editing is something that demands
the user’s full attention, use Overlay Edit.
• For grid editing, follow the pattern Table Edit.
• When dealing with multiple items on a page, Group Edit provides a way to balance
between visual noise and discoverability.
• When providing direct configuring to modules, use the Module Configuration pattern.
Summary on Inline Edit
• The inline edit design pattern is typically used on websites and apps that allow user-
generated content.
• It is usually only presented to authenticated users (users who have logged-in).
• This pattern shouldn’t be used if editing is the primary function of the screen.