Web design by its very nature continues to evolve, as it must, to make the most of modern browsers and the likes of HTML5, CSS3 and JQuery, and to provide a wonderful user experience for tablet and smartphone owners.
Nowadays there is plenty of opportunity to stand out from the crowd, by being ahead of the curve, or by embracing new techniques that can help you to improve the performance of your website.
So I thought I'd round up some of the more recent trends in experiential web design. I say 'experiential' because I'm less interested in seeing whether drop shadows have made a comeback.
The focus of this article is primarily about the aspects of web design that directly affect the user experience, rather than particular stylistic trends to do with the look and feel.
Great designers understand how to design for user interaction, and how to encourage new user behaviours and habits. World-class designers introduce emotion and have fun along the way.
Some of these trends aren't just-out-of-the-oven new, but they're in here because they've become adopted by the mainstream. I have included other design features because they rock, and I'd like to see them on more websites.
It's worth pointing out that user experience professionals are on the fence about some of these things. Do leave a comment if you feel strongly, one way or another, and be sure to let me know what I've missed.
Device agnostic
Let's get the obvious one out of the way first. There is still much talk about responsive vs adaptive design, and which is the best route to take, so that the user experience is wonderful regardless of which device is being used by your visitors. A good thing.
Sticky navigation / content
For example, navigation that remains in the same fixed position as you scroll down the page. Our social sharing buttons do this, on the left of this post. So does Fab's 'sale ends' strip.
A lot of major e-commerce sites have introduced a sticky 'promo strip', which is an effective way of driving sales.
Publishers are increasingly pinning content to the header and footer of the visible page, which may be a step too far. USA Today provides one example of this page narrowing technique.
Encouraging the swipe
These are design features created with touchscreen devices in mind. For example, see the arrows in the category slider on the BBC homepage.
iPhone-esque numbered notifications
Those little numbers we're all familiar with, which alert us to new happenings. For example, at Quora:
Pinterest-style grid layouts
See Pinterest, obviously. And Etsy. And eBay. And Lady Gaga, for that matter.
Non-animated animation
Select 'Scroll Drive' on the VW Beetle website and then hold down the arrow key to scroll.
Inline form validation / auto-saving
Most web forms still don't employ inline validation but it's something that will boost form completion rates, and which we'll see a lot more of in the future. Show a little green tick icon (or similar) when all is ok. Or a red cross if things go awry. There's a great related article on Smashing Magazine that's worth a read, and which includes this example, from Twitter.
Persuasive content
Expedia does this well, by conveying a sense of urgency alongside social proof (assuming these numbers are accurate!).
We also see this on any number of delivery countdowns, such as on Amazon ("Order within 36 min").
Nano emotion
How I love the White Stuff's basket. It looks sad, until you put something in it. If you like this then check out my post on 16 examples of attention to detail in web design.
Superfast sign up
Connect with Facebook / Twitter. Svpply does a good job of this…
There should always be an email option. Klout is a sinner in this respect…
Infinite scroll
Why paginate when you can just keep delivering the goods? For example, Pinterest, or Twitter Search. That said, I sometimes prefer to work my way through pages, so perhaps there should be the option to turn this off.
Storytelling
For example, websites where the design is anchored around the story. I wrote about a bunch of scrolling websites that do precisely this.
Dropdown mega menus
Now commonly found on most major e-commerce sites, dropdowns and mega menus are useful navigation aids and help users to understanding the scope of a website. For example, ASOS.
Hovercards
Scroll over to reveal new content in a little popup. For example, LinkedIn:
Also used by O2's to help people explore tariff options:
Here's a nice plug in that you can use to implement hovercards.
Single page, single idea websites
Increasingly popular in agencyland, such as this example from Flip.
One-page sites are also being used by brands, as microsites based around a campaign, or a simple idea. For example, check out this lovely 'job ad' from Penguin.
Fun meets useful
Lighten the tone, do something random, especially if it is useful. Note how Photojojo encourages people to scroll via a little reverse psychology. Go on, pull that lever!
Auto-complete and suggested search
Google Suggest meets e-commerce. Great for UX, and for merchandisers.
For example, start typing in Apple's search tool and this happens…
Counters and transparency
Lots of websites encourage the user to vote / like / favourite things. Behance takes it a step further by also revealing how many people have seen a page. This is the stuff of nightmares for the world's sketchier publishers.
Branded text highlighting
I've seen this on a few sites. Select some text at Techcrunch and it will be highlighted in green, representing the brand's colours. Simple.
Micro animations
Check out what happens when you hover over a link at Webdesigner Depot.
Phew. Now it's over to you. What trends have caught your eye lately? What design features would you like to see more of?
No hay comentarios:
Publicar un comentario