UI / UX Design

7 UI/UX Principles to Help Create a Fresh Experience

March 31, 2014

Most of us spend 3+ hours online every day using a myriad of devices with screens that require near exclusive attention where over 1 trillion web pages and millions of mobile apps are competing for our time. To help you be effective, Fresh Consulting has selected 7 of its 50+ principles that assure your application or website is sweet and stands out from the rest.

1. Design should focus on an experience

People don’t always remember information presented, but they do remember what they feel. Advertisers focus on selling to our hearts, so why shouldn’t you? As Geoffrey James in an Inc.com article states, “[It] is not the information itself that is important, but the emotional effect that the information has on your audience.”

This is why User Experience Design, or UX design, has become such an integral part of web and application work. It should effectively weave together a combination of text, graphics, layout, and interactive elements to ensure users have an experience, not just an informational view.

With all of the complexity and quantity of information we are swimming in, differentiation matters. If you scan through today’s interfaces, they incorporate more visuals, more story, and more emotion to help convey why they matter in the sea of competitors. This brings us to our next point…

2. People scan websites, they don’t read them

Make your website scannable because users don’t read websites the way they read other material. Is it any wonder why the use of infographics has become standard fare for anyone looking to convey sets of data or instructions? Research shows that “users switch from scanning to actually reading the copy when web content helps [them] focus on sections of interest.”

Case in point, you probably are not going to read this entire article, rather scan the headlines and dive in where you want to read further. Making your interface scannable will make it simpler for today’s audiences, which brings us to our next point…

3. Users crave simplicity and clarity

It takes as little as 0.5 seconds for visitors to decide whether they are interested in a website or not, so be clear with what you want users to do. Today’s interfaces need “preferred actions” to be as obvious as possible. Users should not have to think about what you want them to do. For example, it could mean focusing visual attention on one button vs. four on your home page.

Consider what your web app or website can do to make it easy to use. For example, a form can give default values most users would adhere to rather than giving every option available. Part of design is designing for the majority of your users and letting extra functionality be discovered as needed (e.g. through hover controls) without delivering everything in your face.

A consistent design is actually simpler for users because it reuses components, behaviors, colors, and aesthetic to reduce the need for users to rethink. Users are already familiar with many of the components used throughout the web so complying with these patterns will make the system simpler and clearer to begin with, which brings us to our next point…

4. Know where to get creative and where to use common design patterns

Be careful with innovating new UI patterns that are already commonly known patterns elsewhere. You don’t want people to have to think too hard about where common elements are. Most interfaces should already be familiar to users. For example, links should look like links. Buttons should look like buttons. Login access is typically located in the upper right; logos and company names upper left.

Getting too creative with common patterns is like saying, “Let me put the blinker for the car with the radio controls,” rather than using the standard up/down stick on the left of the steering wheel. It might feel cool to do something non-traditional, but cool does not mean usable. Usability and creativity need to be balanced.

Navigation, URLs, and button placement should focus on usability first before design aesthetic. This is why its best practice to wireframe without design aesthetic to begin with to focus on layout first. Then you can focus on getting creative so the creativity is appreciated, which brings us to our next point…

5. Design to capture someone’s attention above the fold rather than design everything above the fold.

First, designing for “above the fold” needs to be put in context. The fold varies for every device–a fold for a laptop could be three times as small as a fold for a large desktop and a mobile device might have a fold twice as small as a laptop.

This means that while the “above the fold” content is important, it is more important to capture user attention into your experience than it is to put everything above. Putting everything above the fold would be, as Eric Huber states, “the equivalent of taking everything in your store and putting it on the curb, along with painting every sales price on the doors and windows, just in case someone passing by might not come in your store.”

Of course, the stuff above the fold is still important in your information hierarchy because its the first thing people see; however, when you balance the importance of simplicity, clarity, and experience, it puts the ever-changing fold line in context as one variable of many.

It is simply a dated notion that everything important has to be above the fold. What is not dated is capturing someone’s attention so that they want to and do scroll down and experience the rest of your website or application, which bring us to our next point…

6. Scrolling is often faster than paging

Today’s websites are vertically longer, much longer than sites of old when designers thought everything needed to be above the fold. Take this example from Amazon that sells their new Kindle, if you print this page out, it is 17 pages long. While Amazon is unique and their practices as the world’s leading ecommerce site are not best practice for everyone, just visit 10 modern company websites and you’ll probably find the average printed page length to be 3 – 6+ pages.

Back in 1997, Jakob Nielsen, a long time web usability expert, retracted the guideline to avoid scrolling web pages in order to let users focus on speed. He went on to say “scrolling beats paging” because it’s faster to scroll down than to click, which means longer pages can be better than just more pages. Today’s web navigation is flatter as a result.

We often say “clicks are expensive in usability” but what we really mean is that clicks that require page refreshes are “expensive.” People just don’t click as much we design for. At the end of the day, most of us are looking for the easiest and fastest route to get what we need. Scrolling more vs. clicking again may help with that.

The fact is, we’re very fast at scanning a website (see #2) but the average website refresh is 6.5 seconds. What would you rather do? Click into 4 places that takes 27 seconds or quickly scan a longer home page in 5-10 seconds? Flicking and panning on our mobile and tablet devices has only strengthened our scrolling frequency, which brings us to our next point…

7. Build nice responsive design vs. just responsive design

Responsive design–designing your website or app to have a fluid interface for varying device sizes–has been popular for the last few years. If you’re not on the responsive design bandwagon yet, you’ve probably heard that it’s important, but does it really make a difference?Research continues to prove that it does.

However, most design companies, including ourselves originally, were designing websites to be responsive just to be responsive but the size of images and text were sometimes skiwampus in proportion. Users are on all device types of all screen sizes, so you naturally want your site or app to look good everywhere. And there is difference between having responsive design and a responsive design that looks good. So after you’ve checked the box, look at your responsive design on a mobile or tablet device and ask yourself if it is nice.

Founder and CEO of Fresh Consulting, student of all things creative, innovative, and fresh, professional snowboard instructor trainer, father.

  • Ankit Koshta

    thanks man, great information, Please share some more tips and tricks to increase our creativity.

  • priya

    very well presented! thanks a lot bro

  • Xavier

    Great stuff, thank you. I have a comment about #6: what’s wrong with loading the contents of 4 pages as a single HTML payload and then displaying each page’s content individually using some javascript? That would eliminate the load time issue you mention, while retaining the ability to page through content.

    I think the real point you may be making is not about load time but about how the user generally likes to move back and forth through the entire content. Going back and forth between pages is a pain (“which page was that paragraph on again?”), whereas scrolling up and down is not, and you get the browser’s CTRL-F for free.

    Just my 2 cents I’m just a user.

  • Modelcitizen

    I loved this article and think you are well on your way to great things, that being said, if I might be so bold to add, every user experience is different, what blows my hair back could be rather “Meh” to someone else. The ultimate goal is to reach for as much of those passions across a broad spectrum of the user base. How, do we do this? I think knowing who the user base is, for starters, but to jump the shark and create something that has a lasting footprint, I think you have to be bold sometimes. Don’t stop educating the user, expect them to have the capacity to understand, but allow for easy help options as a back up. I don’t want to see the Television model of business enter into this world, I don’t think any of us do. We have to stop dumbing down and do the opposite. I think actively molding and educating the user to become a better more intelligent user will bring rapid advancement and ground breaking ideas to interface and tech, constant vigilance to this idea when creating the user interface I think is paramount. Always stay ahead of the user, and trust that they can keep up with the pace. Their keyboards aren’t encrusted with the orange stain of artificial cheese, as are most TV remotes. learning=passion=motivation I’m just a simple man, but I aspire to more. Help me.

  • Thanks man for sharing this. I need to apply this in my next project.

  • Very helpful tips here. I think following a consistency and maintain a clutter-less design is the key to engaging the users.

    Jorge
    http://julyrapid.com/company/

  • Shahla Alaei

    Thank you for helpful tips. The only thing we must be careful for page load speed. If page is more text then I agree scrolling is better and more user frienly than clicks.

  • Thank you so much for these points. They have demystified what UI UX meant to me, and have given me an insight to what route to pursue in my web development and application journey. Keep up and bring us more write-ups that will mean more difference.

  • stuartJ

    I don’t mean to be rude, but none of this is hardly new. I’ve been doing UX for twelve years and was recently in conversation with a US friend with twenty years experience. We both agreed that there was this UX ‘churn’ were old ideas are sometimes rehashed and presented as if they are new. It was astonishing to read a blog in UX Matters recently that gave the author’s top ten UX trends, one of which was Content Strategy. Did it ever go away!? Your point about emotional verses detail is a very broad-stroke comment. Of course, users will scan the marketing BS. Hopefully, well signposted links get them to the what they want to go. They can THEN get forensic if say, looking at product details. You didn’t mention research. Research is KEY to understanding the user. No marketing (or design) conceit can hide the fact that you must divine what works for users. I’ve dealt with marketing teams that said they understood the customer and didn’t see the need for UX Research. The sell was asking them if they knew how the customer felt when left alone in front of the website? I’m probably old school and will up-skill shortly to stay in work. But I can’t help feeling that as UX grows in importance so it spins faster and faster, but with no real tangible increase in benefit to the customer. Just saying…

  • Saransh M Sharma

    Common but very useful and reminding points that’s we forget in our real life

  • Thank you for sharing your article. This is a very informative article to UI and UX designing principles.
    Keep it up.

You might also like...

22

Jun.

When Out-Of-The-Box Doesn’t Quite Fit, Invest in Your Key Interactions

There is no doubt that many WordPress plug-ins and front-end UI frameworks, like Angular, save massive amounts of design and development time by providing pre-designed and developed interactions. The baseline unedited versions are often robust and provide good solutions for general user needs. We call these unedited versions “out-of-the-box,” meaning, when you first plug it … Continued

28

Feb.

The World of Website Accessibility

When building your website, it’s important to account for accessibility, designing your product so that users with disabilities can access it. Your business should care because the number of people affected by disabilities worldwide is large. The World Bank Group estimates that one billion people – 15% of the world’s population – have some level of … Continued

29

Dec.

UX Trends for 2017

It’s exciting to imagine all the wild possibilities in the future of UX design. What will be on the cutting edge? What will be the next quantum leap in innovation? But to have an impact in the now, we recommend balancing usability against innovation. Existing innovations in the digital space often aren’t refined enough to … Continued