Notice: Trying to access array offset on value of type bool in /home/853194.cloudwaysapps.com/ypzheydydh/public_html/wp-content/plugins/yet-another-stars-rating/public/classes/YasrRichSnippets.php on line 385
Notice: Trying to access array offset on value of type bool in /home/853194.cloudwaysapps.com/ypzheydydh/public_html/wp-content/plugins/yet-another-stars-rating/public/classes/YasrRichSnippets.php on line 386
Personally, I’ve always enjoyed rich user experiences on the web where I could see how much effort creating something must have taken. The minimalist trend was never entirely my thing, although I don’t have a reasonable explanation for this. It’s just my own take on web design.
But rich user experiences are not about building 100%-Flash powered sites anymore. In this day and age, the results (as in monetary results) are what matters most for almost all websites, and having something that’s visually attractive is only #2 or #3 on the list.
Therefore, rich user experience sits in the details. Or in other words, the main principle is to make a design rich through simplicity with some cool icing on top of it. The thing is that small details make a big difference in many areas of our life, and we have every reason to believe that it’s the same story with web design as well.
(By the way, feel free to disagree with me at any point and express your opinion in the comments.)
So without further delay, here are 5 ways/methods of making your design richer without spending hours in the source code.
1. Clever use of images and layouts in WordPress
Now, before you skip this point altogether labeling it as being obvious, let me show you an example. Here’s a screenshot of a Kick-Ass 2 review post published on The Verge (sorry, the page is quite long, but I really want to show you most of it):
The design itself is very very simple. Just minimal header, slider at the top, then the post, followed by the comments. There’s literally but one fancy element on the whole page EXCEPT the main content block that uses images in a truly superb way (plus the typography is also cool).
To give you a counter example of how much of the effect is created by the images, I’ve tuned this page a bit in Chrome and erased all of the cool elements. Here’s the effect:
Hardly the same impact, right?
Interestingly enough, when it comes to the technical stuff, such use of images can be implemented on most WordPress sites. Themes like Thesis provide better mechanisms for adjusting content pages, and plugins like Drag and Drop Builder make the whole process as straightforward as possible. You really can get a The-Verge-like effect within minutes with no coding.
2. Smart use of animation
Nothing says “rich user experience” like some ol’ school animation (right?), but we’re only going to use a little of it. Remember, it’s about putting some icing on the cake and not taking over the whole cake, so to speak (plus, it’s no longer 2002).
The tool I stumbled upon to do this with is simply called the Presenter. It allows you to build cool animations, presentations and all sorts of interactive graphics. What’s nice about it from a web designer’s perspective is that it produces an HTML5 output, so you can really place it anywhere you wish, which includes WordPress pages too. It claims to be so easy to work with that “your Grandmother can use it” (an actual quote).
3. Remember about rich media embeds
Being in tune with the idea that details matter, let’s discuss the topic of embedding various media content from across the web.
In our everyday work, it’s quite easy to forget that WordPress works with a wide range of services to provide easy embeds that require little to no additional work except copying and pasting a link.
The list of services is expanded every time a new version of WordPress releases. It’s good to go back to it whenever you’re thinking about creating an attractive way to include specific site’s content as an embed.
For instance, the newest version of WordPress – 3.6 – introduces Spotify embeds. And the previous one – 3.5 – made it possible to embed Instagram photos.
Some of these embeds are really full-featured, and doing something similar by hand would take hours. Just an example to prove my point; for Twitter embeds (introduced in WP 3.4), what you get is a fully interactive box, through which every visitor sees the author’s avatar, name, gets the possibility to favorite, retweet, and whatever else Twitter has to offer these days.
Example screenshot:
4. Take advantage of what’s already available
The thing I want to encourage you to do at this point is to design with plugins in mind. In other words, thinking about new cool (visual) functionality you can put on a site is fine and all, but if you are able to eventually implement it with a ready-made plugin then your work will be so much easier.
Therefore, in the end, it’s not the individual plugins that are important but the mindset when sitting in front of a blank screen ready to do some work.
You might think that this is a limitation of some kind and that true design is not about fitting your ideas into a “plugin box,” but when we take a broader look at it, we’re actually forced to adhere to many rules that have been with us for years so we no longer even notice them. Rules like vertical design instead of horizontal, or the header-content-footer layout structure.
Anyway, to get you in the right mood, here are some plugins to check out first (some of them are paid, sorry about that):
- Meteor Slides – the only free decent plugin I could find for a slider functionality, everything else that’s good looking is paid. (If you know of something free and equally good, feel free to let me know in the comments.)
- Interactive World Map – it’s a great plugin for anyone who does some business globally and wants to display a cool world map that the visitors can click on.
- iMapper – an image mapper; in other words, you can pick specific areas of an image and add some descriptions to them; really handy.
- Logos Showcase – a slider, but designed primarily to display company logos and badges; you can use it to show a portfolio of companies or an “as seen on” block.
- Go – Responsive Pricing & Compare Tables for WP – a really nice interactive pricing plugin for product sites; these things are really trendy, and this plugin gives you everything you need in order to build them on any site.
5. Responsive design if possible
These days, the no. 1 thing you can do to make a website’s experience rich is to make its design responsive. And I didn’t include this on the top of the list only to not make the whole thing sound too obvious, but the fact is that responsive is king. Or is it?
The only problem is that the more complex the functionality, the more difficult it is to make a given site responsive. So instead of praising that “you always need to build responsive designs” let me give you a different advice: Build responsive designs whenever it’s achievable through standard mechanisms of CSS.
Yes, if you ask me, responsive design is not a must. And even though some devices with small screens will have trouble displaying non-responsive designs, I really don’t believe it’s a good idea to spend 80% of your time improving the display on 20% of devices. Doing it the other way around is always a better approach.
I guess this sums up my 5 tips on how to create rich user experiences without spending all of your time in the source code. What’s your take on this?
