Blog

It's Not Me, It's UI

Posted by Jack | March 15, 2018

Progressive User Interface Enhancements

Most people have forgotten more websites than they remember. Skeptical? Go look through your old browser history from awhile back and see how well your recollection of them is. It’s not going to be great but you will remember a few. Be one of those lucky few.

What can possibly get you to that level is offering your audience more than just a competent website and strive to surprise them, delight them and ultimately engage them. How to do that? One way is progressive user interface enhancements (PUIE).

Hover

The easiest and quickest example of a PUIE is the simple ‘hover’ attribute that is ubiquitous on every website. Mainly used on links to let users know that the element is indeed clickable, we can dress it up significantly.

Here is an example of some of the uses:

Main Uses:

  • Highlights CTAs
  • Confirms what they want to click on
  • Encourages them to click through

More examples:
http://ianlunn.github.io/Hover/

Transitions

George Lucas is known for his interesting screen transitions and now we can bring some of that magic to our own websites! It’s exactly as you remember it, color-wipe, stacking, fades are all in play when a user clicks or scrolls to go to another section. This is best suited for those times where you want to move a user from one topic to another with a significant visual flourish. This can be used to excite the audience with appropriate visuals or branding.

Here is an example from the Apple website:

Main Uses:

  • Highlights the content
  • Keep audience excited with dramatic introduction

More examples:
https://tympanus.net/Development/PageTransitions/

Parallax

Similar to transitions but unique unto itself is Parallax websites that most people have come across in the wild by now. I would define it as a transition effect that utilizes elements that can change position so that the relativity between them is what is striking. The versatile way you accomplish that contrast is of course the key. It can be used in a more practical way than transitions in that transitions make a visual topic change but parallax elements can be a visual and communicable topic change in itself.

Here is an example of one the websites that made it famous back in 2013:
https://www.kitkat.com/android/#/home

  • Entice audience to stay and explore
  • Highlight your concept
  • Delight the audience

Next Steps

Progressive User Interface Enhancements might not be the right for most websites but when it calls for it, these elements can be a boon to make your website engaging, memorable and even help tell your story in ways traditional websites cannot.

Contact Westminster today for your next web project and maybe it’s just what you need to get the results you need!


Christine Rose

"Flawless support of Sales Kickoff! From the giveaways, to digital signage, to handouts, to awards… all was exactly as requested."

Informatica