If you’re on this site you’re no doubt knee-deep in design ideas and aesthetic choices. UIs change at a rapid pace and affect everything around them. Websites and service providers constantly juggle attractiveness with platform consistency, and sticking out from the crowd becomes ever-tougher as usability and the intuitive, unspoken rules of the casual browser become ever more entrenched.
Before you know it, your website has eye-catching aesthetics, an elegantly designed UI, a complete set of social and interaction features, but absolutely NO relation to the product you’re trying to represent!
There’s so much going on in the world of design that it’s easy to miss the basics sometimes, here are some examples of sites that have particular products and services to present. Let’s have a look and see what they do right and wrong with regards to representing what they’re about.
Books aren’t a strange or niche product, in fact, most designers would relish the opportunity to design a site around such a diverse product with plenty of possibilities. With that in mind, it’s astonishing just how badly Goodreads represents itself. Take a look at the landing page: Coloured in white and the kind of stainy beige you find in your grandma’s decades-old curtains, there’s a small concession to books with an uninspired graphic of a bookshelf, shown cropped in the background as if in embarrassment.
Things get worse whilst you navigate the site’s pre google-era gradients and overbearingly mono-minded presentation. Without text, you might barely get the idea that this is a site about books as you see the occasional cover amongst it’s patchy clumps of text, profile pictures, and predilection with groups and lists – but books are never at the forefront.
Virtually every other book-related site tries somewhat to represent some sense of the physicality of books via virtual shelves, flippable covers or 3d images, but goodreads treats books almost like an arbitrary function. It’s a good thing goodreads is actually a decent site with comprehensive listings of books to rate and review, as it doesn’t do a good job of representing its product, whether that’s books, social connections, or community.
Velocity Rewards is a bit of a peculiarity in that it won’t be winning any innovative – or even interesting – design awards, but it does a pretty good job of showing a rather peculiar and finicky kind of service – frequent flyer points – in a trustworthy manner. Those drop down menus, clunky skeuomorphism, almost-cheesy ad-like images, and clashing palettes may look archaic and a little clumsy, but the flat lines and arrangement has become so common amongst bank, government, and corporate sites that Mr.5-hours-of-internet-per-week immediately places it within that category and class.
While it may seem counterintuitive even, the unwieldy nature of such sites can even contribute to their air of reliability. Just as big companies can be slow-moving yet permanent, their sites can be somewhat clumsy whilst feeling secure. Velocity rewards is an even more interesting example in that it’s specifically for frequent flyer program – something that most people wouldn’t care about and may even be dismissive of. The clues are there, pictures of air travel, that logo, and presenting key words largely up front (points, redeem, program, etc) By taking website and content cues (and some kudos) via similar colour patterns, layout and cross media from their parent company Virgin Airlines, they’ve created a site that presents a rather niche and unwieldy product in a respectable and authoritative manner.
Could this be better? Of course. Air travel is quite sexy. A few silhouetted logos, a nippy, 2d interface presented in bold, nicely framed colours, and perhaps some nicely presented video content could create a bigger impression, and perhaps push thoughts of queues, security gates, cramped seats and hefty luggage cases aside for a feeling of freedom and airiness. That may be my taste talking, however. As it is, it’s clear what this site does – as clear as you can make an air miles program – and it strikes a nice point between clunky reliability, and clean modernism.
Ticketbis gets everything right. No slogans, no roundabout tricks, no over-eager attempts to shove a million features and navigation options on the front page – this is a site for people who’ve used the internet for more than 5 minutes. Instead of ‘Meet your next favourite book’ (Grr) you’re greeted with ‘buy and sell tickets for events worldwide’ – almost as if you were a sane adult simply trying to engage with a service instead of a gullible marketing target. A simple use of images conveys that the site provides for things like the World Cup, pop music, and some alternative events. Navigation is simple – and made simple by a lack of options (a technique many bedroom web designers with too many tools and too little restraint could do well to learn).
It’s no mystery who ticketbis are taking design tips from, take a look at the triple row options button (Google) and open sans font (Windows 8). In the future, more sites will look like that. You can’t get a better association or guarantee of usability than making your site like google or W8, and with a product that tends to have a complex and confusing representation online there’s not much room for innovative design tricks. Even if you’re not ripping off wholesale (as ticketbis does) simply presenting information in a plain and restrained manner – still a rarity on the net – is where future customers lie.
Whether I specifically want to buy Arsenal tickets for the next game, or browse for an upcoming international event I might like, it’s beneficial to me as a user, and you as the web designer to stay out of my way and not try to push things onto me. All that white space that you didn’t fill with adverts, promotions, and completely tangential products helps me figure out what products you’re offering, and keeps me one step closer to buying them.
Having a product that’s difficult to represent, and designing a website around that product can be an unenviable task, but it’s also a challenge that opens up possibilities. As with most web design, if you break things down to fundamentals, and push those ideas, connotations, or examples, the rest will follow naturally. However complex your service, keep your first impression clear and direct. A user looking for something niche or complex will be willing to invest time in finding it. A user who doesn’t know your product is looking for a good impression – and you only get to make that once.
- Striking Examples of the Glitch Effect in Web Design
- Shining Examples of the Flashlight Effect Web Design Trend
- 8 Snippets That Demonstrate the Repelling Effect in Web Design
- Bringing the Curtain Effect to Your Website with These Snippets
- Taking a Look at Brand-Related Splash Screens in Web Design
- 8 Fascinating UI Concepts for eCommerce Websites
- 8 Fantastic Onboarding Carousel HTML & CSS Snippets
- 10 Best Tools and Resources for Designing Accessible Websites