Joseph Rex
I'm here for the popcorn ;)
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
The state of user interaction
By Joseph Rex
