3 Ways to Spice up UX for Dummies

Fun with DOM and JSX

Looking to jazz up an application? Not a designer or a UX expert? Here are my favorite simple, interactive elements I’ve added to my applications.

Flippin’ Card

I utilized this in an application where I was displaying a digital version of seed packets. On one side, the photo and name of the plant; on the other side, the planting and growing information. I utilized the npm react-card-flip, which is very easy to install and implement. I customized my version to be a click on the div element itself instead of a specified button, like so:

render(){
        return(
            <div className="card-hidden" onClick={this.handleClick}>
                <ReactCardFlip isFlipped={this.state.isFlipped} flipDirection="horizontal">
                    <div className="card" onClick={this.handleClick}>
                        <SeedCardFront seed={this.props.seed} handleClick={this.handleClick} />
                        <br />
                        {this.renderButton()}
                    </div>
                    <div className="card" onClick={this.handleClick}>
                        <SeedCardBack seed={this.props.seed} handleClick={this.handleClick} />
                    </div>
                </ReactCardFlip>
            </div>
        )
    }

With a few design adjustments, you can even get a nice 3D effect! To further customize, you could change the onClick to a mouseOver event, or even create a 3-sided digital object!

I love this specifically for decluttering the DOM. You have the option for twice the information without taking up as much space.

Drag-n-Drop

Draggable list elements are the main feature of my Story Peddler application. The purpose of this is for users to be able to rearrange story elements, which I refer to as plot points for the purpose of this version of the app. The feature is meant to replicate what many writers do in the real world: writing their plot points or chapters or whathaveyou on sticky notes or index cards, which they can then move around as they organize their structure. To replicate the same ease in the digital space I wanted draggable elements that save in their new order when dropped into their new position, like my favorite Apple weather app with locations.

I started with this article where you can find a ton of great drag-and-drop options. Play around with them all to find the one that fits your application the best!

Color Changing Buttons

While working on my first version of Story Peddler I utilized a free Bootstrap theme from Bootswatch called Sketchy, and found one of my favorite easy to implement design elements.

The applications colors of black and white were actually meant to evoke the idea of a whiteboard, so having the pops of color on their worked really well for this particular application, and it’s very easy to implement into any css folder, though I had never had cause to user the .hover tag before this.

Utilizing the hover tag can be very helpful for UX and visual accessibility (though keep in mind it won’t transfer to a mobile platform!) I’ve also used hover to thicken the border of a div element to highlight it. It’s a small detail you’ll find in many applications and sites, but for a project can really bring it to the next level visually.