THE
OF
INTERACTION
Exploring how humans interact with digital products, environments, systems, and services.
Also, how computers interpret human intent
How does React help?
How does React help?
With properly planned states, we can anticipate all possible user events and scenarios, thereby minimizing bugs.
Unfound Records and Null Pointers
Empty Records
General Error
Action Cancellation
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>
);
}
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>
);
}
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>
);
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
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