STATE

THE

OF

USER

INTERACTION

Joseph Rex

SOFTWARE ENGINEER

UI ENTHUSIAST

HUMAN-COMPUTER INTERACTION

Exploring how humans interact with digital products, environments, systems, and services.

Also, how computers interpret human intent

5 DIMENSIONS

OF INTERACTION

Words

Visual Representation

Space

Behavior

Time

5 DIMENSIONS OF INTERACTION

Words

Visual Representation

Space

Behavior

Time

5 DIMENSIONS OF INTERACTION

Words

Visual Representation

Space

Behavior

Time

5 DIMENSIONS OF INTERACTION

Words

Visual Representation

Space

Behavior

Time

5 DIMENSIONS OF INTERACTION

Words

Visual Representation

Space

Behavior

Time

5 DIMENSIONS OF INTERACTION

Words

Visual Representation

Space

Behavior

Time

Information Architecture

Illustrations

Spaced Actionable targets

Adaptive Feedback

Well timed durations and delays

How does React help?

How does React help?

STATES

STATES

With properly planned states, we can anticipate all possible user events and scenarios, thereby minimizing bugs.

COMMONLY IGNORED STATES

Unfound Records and Null Pointers

Empty Records

General Error

Action Cancellation

Typical HTTP Request

import React, { useEffect, useState } from 'react';

function App() {
  const [user, setUser] = useState({});

  useEffect(() => {
  	fetch(ENDPOINT).then(response => response.json())
    .then(data => { setUser(data) });
  }, []);
  
  return (
    <div>
      <h1>Profile</h1>
      <img src={user.image.thumbnail} alt={user.name} />
      <p><strong>Name: </strong>{user.name}</p>
    </div>
  );
}

With Error Prediction

import React, { useEffect, useState } from 'react';

function App() {
  const [user, setUser] = useState({});
  const [error, setError] = useState('');

  useEffect(() => {
  	fetch(ENDPOINT).then(response => response.json())
    .then(data => { setUser(data) })
    .catch(err => {
      setError(err.message);
    });
  }, []);
  
  if(error) return <div>{error}</div>;
  return (
    <div>
      <h1>Profile</h1>
      <img src={user.image.thumbnail} alt={user.name} />
      <p><strong>Name: </strong>{user.name}</p>
    </div>
  );
}

With Loading State

const [user, setUser] = useState({});
const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
  setIsLoading(true);
  fetch(ENDPOINT).then(response => response.json())
  .then(data => {
    setIsLoading(false);
    setUser(data);
  })
  .catch(err => {
    setIsLoading(false);
    setError(err.message);
  });
}, []);

if(isLoading) return <div>Loading...</div>;
if(error) return <div>{error}</div>;
return (
  <div>
    <h1>Profile</h1>
    <img src={user.image.thumbnail} alt={user.name} />
    <p><strong>Name: </strong>{user.name}</p>
  </div>
);

Endless Unplanned States

const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [isCancelled, setIsCancelled] = useState(false);

if(isLoading) return <div>Loading...</div>;
if(error) return <div>{error}</div>;
if(isCancelled) return <div>The request has been cancelled!</div>;

return defaultContent;

Anticipating Probable States

STATE AWARENESS

CSS works as a great UI development tool because it stays aware of all states of interactive elements.

With awareness, comes a good plan for information architecture on all user interaction scenarios, appropriate illustrations, some more thoughts for interactive feedback.

Other dimensions of interaction will have to be thought of even when state awareness does not enforce or shed light to them