Livro #1

Resumo – 22 Novembro (Pag.1-70)

This combination of design principles at the top and design considerations at the bottom

is what allows architects to fill in the middle with meaningful buildings that enable people

and organisations to interact, communicate, and get things done.

The thing is, interface design has increased dramatically in the last few years and is necessary for the user experience, which is the main reason why this book was written: to give the principles and patterns necessary for anyone interested to learn how to create the best possible user interface.

This book talks about and describes the 7 principles that govern interface design, as well as how you can apply them.

Principle 1: Make it Direct

 This principle is that all interactions the user makes with the interface should be as direct and intuitive as possible for the user. Content on web pages has traditionally been display-only. If something needs editing, a separate form is presented with a series of input fields and a button to submit the change. Letting the user directly edit content on the page follows the principle of Make It Direct.


  • Inline editing

We should put all the editing stuff inside the same point where we want to edit in order to facilitate user recognition. The advantage of Inline Edit is the power of context. It is often necessary for users to continue to see the rest of the information on the page while editing. There are two types of Inline Editing:

  • Single-Field Inline Edit
  • Multi-Field Inline Edit

A point to take into consideration is In Single-Field Inline Edit the difference between display mode and edit mode can be more easily minimized, making the transition less disruptive. But when editing multiple fields, there is a bigger difference between what is shown in display mode and what is

needed to support editing.

  • 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. It is a good choice if the editing pane needs dedicated screen space.

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.
  • You want to create a clear editing area for the user and the context of the page is not important to the editing task.
  • Group Edit: If you want to keep the display of items on the page as uncluttered as possible while still supporting editing, consider using this single mechanism to enter a special editing mode.
  • Symmetry of Interaction: Activation and deactivation should normally follow the same interaction style. This makes it easy to discover the inverse action
  • Module Configuration: 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.


  • Drag and Drop

There are tons of events available for cueing the user during a drag and drop interaction. We are going to mention the most usual ones:

  • Page Load: Before any interaction occurs, you can pre-signify the availability of drag and drop. For example, you could display a tip on the page to indicate draggability.
  • Mouse Hover: The mouse pointer hovers over an object that is draggable.
  • Mouse Down: The user holds down the mouse button on the draggable object.
  • Drag Initiated: You can use an interesting moments grid to capture any complex interaction. One of the most useful purposes of drag and drop is to allow the user to directly place objects where she wants them on the page. A typical pattern is Drag and Drop Modules on a page.
  • Drop Module

There are two ways of use this method mainly and the use of them depends on the size of the elements that we are dragging, dropping and the size of the web container: Placeholder target and Insertion target

The most important advices of this part are:

  • Keep in mind that Drag and Drop takes additional mouse dexterity. If possible, shorten the necessary drag distance to target a drop.
  • Ghosting the module also indicates that the module is in a special mode. It signals that the module has not been positioned; instead, it is in a transitional state
  • For Drag and Drop Modules, use the module’s midpoint to control the drop targeting.
  • Drag and Drop List: Rearranging lists is very similar to rearranging modules on the page but with the added constraint of being in a single dimension.
  • Drag lens: Drag and drop works well when a list is short or the items are all visible on the page. But when the list is long, drag and drop becomes painful. Providing alternative ways to rearrange is one way to get around this issue. Another is to provide a drag lens while dragging.