User experience principles

Mapping

Mapping involves creating a clear and intuitive connection between controls and their outcomes. In web development, maintaining a logical mapping ensures that users can predict the consequences of their actions. This might involve aligning the position of navigation links with the content they lead to, or ensuring that buttons correspond to the expected actions users want to perform.

Loading example...

Open  'src/MappingExample.js'
import { Button, Input } from '@dhis2/ui'

const MappingExample = () => {
    
    return (
        <>
            <br/>
            <div style={{'display':'flex', 'alignItems': 'center'}}>
                <div style={{'width':'300px'}}>
                    <Input  placeholder="The following button is for this field." />
                </div>
                <Button>Send</Button>
            </div>
        </>
           
    );
}

export { MappingExample }