Types of animations

To create good motion it is necessary to be conscious of the types of affine transformations available in the UI motion:

  • Translation – changing view position in X or Y axis
  • Scaling – changing the scale of objects width, height or both
  • Rotation – rotating object around X, Y or even Z axis

There is also a possibility to change opacity (alpha property) and color of an object.

The combination of these types may give outstanding results. Your specification has to include a description of the transformation type.


Customised aggregation of cards / tiles

The (customised) aggregation (of tiles on a page) depends on:

  • The person consuming the content and their interests, preferences, behaviour.
  • Their location and environmental context.
  • Their friends’ interests, preferences and behaviour.
  • The targeting advertising eco-system.

Cards are fast becoming the best design pattern for mobile devices

Mandel: The Golden rules of interface design

Place Users in Control

  1. Use modes judiciously (modeless)
  2. Allow users to use either the keyboard or mouse (flexible)
  3. Allow users to change focus (interruptible)
  4. Display descriptive messages and text (Helpful)
  5. Provide immediate and reversible actions, and feedback (forgiving)
  6. Provide meaningful paths and exits (navigable)
  7. Accommodate users with different skill levels (accessible)
  8. Make the user interface transparent (facilitative)
  9. Allow users to customize the interface (preferences)
  10. Allow users to directly manipulate interface objects (interactive)

Reduce Users’ Memory Load

  1. Relieve short-term memory (remember)
  2. Rely on recognition, not recall (recognition)
  3. Provide visual cues (inform)
  4. Provide defaults, undo, and redo (forgiving)
  5. Provide interface shortcuts (frequency)
  6. Promote an object-action syntax (intuitive)
  7. Use real-world metaphors (transfer)
  8. User progressive disclosure (context)
  9. Promote visual clarity (organize)

Make the Interface Consistent

  1. Sustain the context of users’ tasks (continuity)
  2. Maintain consistency within and across products (experience)
  3. Keep interaction results the same (expectations)
  4. Provide aesthetic appeal and integrity (attitude)
  5. Encourage exploration (predictable)

From the chapter ‘The golden rules of interface design’ in: Theo Mandel, ‘The Elements of User Interface Design’, 1997

Kurt Schwitters: Gesetze der Bildform

Visiting the exhibition Van Doesburg and the International Avant-Garde at the Tate Modern, I was struck to see something like a website wireframe in a small book from 1930, ‘Gesetze der Bildform’, by the modernist artist Kurt Schwitters.

Kurt Schwitters: Gesetze der Bildform
Kurt Schwitters: Gesetze der Bildform, 1930

On these two pages he compares / contrasts orientation with advertising.

Orientation / Advertising … (Orientierung / Werbung)

  1. Static / Dynamic … (Ruhend / Bewegt )
  2. No center, balanced, hence stable / Distinct center, hence radiating … (Ohne Mitte, daher ausgeglichen / Betonte Mitte, daher austrahlend)
  3. Passiv / Aktive … (Passiv / aktiv)
  4. Objektiv / Subjective … (Objektiv / Subjectiv)
  5. Vertical, horizontal, rectangular forms / Parallel, any shape … (Senkrecht, waagerecht, Vierecke / Parallel oder schraeg, jede beliebige Form)
  6. Parts of the same type; the negative of each part is essentially the same as its positive / Parts of different types. Negative and positive are essentially different, like conkave and convex … (Teile gleichartig; das Negativ jedes Teiles ist im Wesen gleich seinem positiv / Teile verschiedenartig; Negativ und Positiv sind wesentlich verschieden, wie konkav und konvex)
  7. hence – providing orientation / hence – advertising, aggressive … (also – orientierend / also – werbend, aggressiv)

Visually structured v plain language information

My comment in response to Jeff Johnson’s book/article: Designing with the Mind in Mind

I do agree that visual structure is key to clean and scannable interfaces but this insight is often being challenged in usability test sessions. Presenting information in a purely structurded way implies some level of abstraction that many users (particularly casual ones) cannot follow easily as it makes them ‘think’. And this is what UX designers want to avoid by all means :-).

People often prefer plain language information, phrased in full sentences. My guess: it’s because a sentence is more explicit and is better suited to mimic a conversation (which successful HCI is all about).

This does not hold true for any site and any type of information and it doesn’t undermine the good principles that you’ve outlined here. But it shows that minds work differently and many people want to be addressed in a more direct (as you call it) prose style.

Book index: Designing Web Interfaces

Bill Scott: Designing Web Interfaces: Principles and Patterns for Rich Interactions

Principle one: Make it direct

    In Page Edit

  • Single Field Inline Edit
  • Multi Field Inline Edit
  • Overlay Edit
  • Table Edit
  • Group Edit
  • Module Configuration
    Drag and Drop

  • Drag and Drop Module
  • Drag and Drop Object
  • Drag and Drop Action
  • Drag and Drop Collection
  • The Challenges of Drag and Drop
    Direct Selection

  • Toggle Selection
  • Collected Selection
  • Object Selection
  • Hybrid Selection

Principle 2: Keep It Lightweight

    Contextual Tools

  • Fitt’s Law
  • Contextual Tools
  • Always Visible Tools
  • Hover-Reveal Tools
  • Toggle Reveal Tools
  • Multi Level Tools
  • Secondary Menu

Principle 3: Stay on the Page


  • Dialog Overlay
  • Detail Overlay
  • Input Overlay

  • Dialog Inlay
  • List Inlay
  • Detail Inlay
  • Tabs
  • Inlay Versus Overlay?
    Virtual Pages

  • Virtual Scrolling
  • Inline Paging
  • Scrolled Paging: Carousel
  • Virtual Panning
  • Zoomable User Interface
  • Paging versus Scrolling
    Process Flow

  • Interactive Single Page Process
  • Inline Assistant Process
  • Dialog Overlay Process
  • Confirgurator Process
  • Static Single Page Process

Principle 4: Provide an Invitation

    Static Invitations

  • Call to Action Invitations
  • Tour Invitation
    Dynamic Invitations

  • Hover Invitation
  • Affordance Invitation
  • Drag and Drop Invitation
  • Inference Invitation
  • More Content Invitation
  • Principle 5: Use Transitions
    • Transitional Patterns

    • Brighten and Dim
    • Expand/Collapse
    • Self-Healing Fade
    • Animation
    • Spotlight
      Purpose of Transitions

    • Engagement
    • Communication

    Principle 6: React Immediately

      Lookup Patterns

    • Auto-Complete
    • Live Suggest
    • Live Search
    • Refining Search
      Feedback Patterns

    • Live Preview
    • Progressive Disclosure
    • Progress Indicator
    • Periodic Refresh

    The trade-offs between elements adjacent in space versus stacked in time

    The trade-offs between elements adjacent in space versus stacked in time are always in the mind of a UI designer. Placing many elements on the same screen reduces the need for navigation and gives users a comprehensive feeling of “it’s all at my command.” Moving focus from one element to another is instant and seamless. On the flip side, separating elements onto different screens slows things down with navigation while increasing clarity. There is more room for explanation and luxurious space when fewer elements occupy the page. The eye has less to filter through. The course of action is more obvious.

    From Ryan in the Article ‘Learning from bad UI