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.