ESSENTIAL
INTERACTION
DESIGN

Default design patterns I find myself repeating.
The other notes will be added soon.
Arrow keys to advance →

by Jan-Christoph Borchardt

I designed most of ownCloud

am active in the unhosted web apps & remotestorage movement

And you might have heard about
Terms of Service; Didn’t Read

Let’s get started. Here’s a familiar scenario: You’re working on your things …

Then a popup appears out of nowhere, which you of course not read and then click away.

NOOOOOOOOO! Your work is lost and you don’t even know what happened.

(
UNDO

Instead of asking questions no one listens to, offer undo.

Gmail does that with undo send.

ownCloud lets you undo file deletions.

just lie

Lying is a central part of keeping the user experience smooth.

but never lose data

***
***
REPEAT PASSWORD

What’s the purpose of double password input? Prevent error … by introducing more potential for error?

***
SHOW PASSWORD

What’s the purpose of double password input? Prevent error … by introducing more potential for error?

Apple does it right.

The new windows as a great new in-field toggle.

ô
SEARCH

Another basic example.

You scroll down a list which already doesn’t use pagination (which is good) and then this appears: A button to load more.

What do they think I’m going to do? I’ll probably click it. Why do I need to do this?


AUTOMATIC

Just do it automatically instead of giving me that work.

flow

o
TEXT BOXES

automate where possible

@
SETTINGS

And beware of just adding a setting. If there are too many settings, people don’t find the right one anymore.

#
RIGHT CLICK

Right click nowadays is hard to discover.

Especially on these things.

discoverability

m
BLANK SLATE

R
FEEDBACK

.1 s
1 s
10 s

guide users

::: : ::
PROXIMITY

Objects near each other are perceived as a group.

But this can also be negative, when destructive controls are placed next to the natural control.

+
USER MENU

M
HIDE & REVEAL

}   N
SIZE & AGE

i
SORTING

A–Z?

relevance

7
FAVORITES

:
LANGUAGE

Choice of words can be alienating.

URL

link

reboot
bug
MIME type

restart
issue
file type

http://

^
404

6
BE HELPFUL

6
THANK YOU
@jancborchardt