Co-founder @interfacewerk

Moritz C. Türck
@mochtu

Interactive UI Patterns

for Angular

Interactive?
UX?
UI Patterns?

Why should a dev care?

I

You’re making the (small) UI decisions.

II

Developing software is making the user's problem your problem!

~ Jeremy Keith

III

You are fighting for attention & acceptance with your product.

We can do better.

Five Patterns

I

Clearly communicate the state of things

Use buttons to communicate state!

Demo

doing smth & progress

Use buttons to communicate state

success or failure

neutral

<stateful-button [buttonState]="myButtonState">
  <button (click)="do()">
    <sb-label-idle>Save</sb-label-idle>
    <sb-label-doing>Saving</sb-label-doing>
    <sb-label-success>Saved</sb-label-success>
    <sb-label-failure>Save failed!</sb-label-failure>
  </button>
</stateful-button>

Angular2 Stateful Button

https://github.com/interfacewerk/ng2-stateful-button

import { ButtonState } from 'ng2-stateful-button';

@Component(…)
export class MyComponent {
  …
  myButtonState: ButtonState = ButtonState.IDLE;
  …

  do() {
    this.myButtonState = ButtonState.DOING;
    // http requests, timeout, etc.
    this.myButtonState = ButtonState.SUCCESS;
  }
}

Angular2 Stateful Button

https://github.com/interfacewerk/ng2-stateful-button

Show state in connected elements

II

Use different levels of negative feedback

Demo

III

Maintain spatial relationships

III

Maintain spatial relationships

… through animations

III

Maintain spatial relationships

… through context

Demo

1. Create the base layout before the angular app is initialised.

2. Use your global styles.css to share the same look.

<div id="loading-app-placeholder">
  <aside>
  </aside>
  <main class="loading">
  </main>
</div>
<app-root></app-root>

IV

Optimistic UI

Demo

V

Always allow recovery

Demo

Your deleted Charles Max Wood. You have [9s] to undo this.

Recap

1. Always communicate the state of things

2. Use different levels of negative feedback

3. Maintain spatial relationships

4. Optimistic UI

5. Always allow recovery

Now go and empower your users!

@mochtu

@interfacewerk