UI tools that can supercharge your software

UI Widget
The frontend is taking over. With the user expectation rising constantly for quick, apadtive UI that lets them easily understand and access a site or app, new methods are constantly invented for displaying data. Sometimes a quick animation or menu effect can do more to inform users than a full design overhaul, here are just a few impressive UI tools.

Expanded details

Tooltip

Details can be messy. A design is often trapped between the two demands to inform by displaying all the detail whilst remaining clear and legible, and so the expanded detail seems to suit this demand. Having tooltip panels that popup with a click, hover or touch can still make all the information accessible, but only as needed for quick reference. Each use case needs separate assessment, but this can be a massive space saving tool.

Draggable actions

Ever click a button to add, update or delete a record and then get confused as to whether it has happenned? Even with the trust in the application, there is an uneasy sense that information may have been sorted wrong or deliver the wrong output. An old technique seeing a comeback in the age of touchscreens is the ‘drag’. Dragging an object into a circle (like Google Plus) or over an icon (such as trash can) gives a confident sense that a record is in the right place and the action is being recorded, even if in a technical sense the same thing is happenning.

Status animations

Complete animation

The loading spinner is certainly nothing new, but the animating GIF long outdated. Leveraging the power of CSS animations allows a system to give much greater feedback about a process completion or error, with a smoothness to indicate clearly what follows. With modern applications completing asynchronous tasks that do not block a user’s actions these staus animations are a great deal more effective.

Adaptive display

Adaptive display

Responsive design is the standard now, but its not always as simple as making the columns adapt and fill the screen width. A more careful consideration for the user on a mobile device can include adapting buttons, hiding distracting elements that will less likely be used and in some cases a whole adjustment of the layout.

These examples are just a brief overview of opportunities, but the effectiveness of presentation is having an increasingly significant impact on building high quality data management systems.

Thanks to Josh GibletteSam ThibaultKerem SuerBarthelemy Chalvet for the images on Dribbble.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s