Adding Personality to Mundane Web Pages Like 404 & FAQ
Personality is an interesting thing to incorporate into a design. For me, personality shines most in two things: in the details and in trying something new.
Both of those approaches often go hand in hand. I find design with personality so much more interesting and relatable, don’t you think? It also makes the whole design come together; that’s because attention to details do that very well.
Details and the small things
I adore the subtle detail that when you hover over the first film image of a film, say Pleix’s Lexus commercial, the title of the film changes and is then replaced by “Watch the film.” Like I said, it’s subtle but it does add a touch of elegance and thoughtfulness to the experience. To ensure the change doesn’t become too unnoticed, on hover the title and name of the artist shifts a little as to draw your attention to it. If you don’t notice it oh well but if you do, you get a better experience.
Do you think that this page would be as cool and elegant if the elements all nicely aligned? Instead they are a little bit thrown around, the text is overlapping the images, the images are off to the side, etc. I think it’s an important detail to note that something so straightforward as layout can enhance a look and feel of a page.
Take a look at the above animation by Loe Leung. It’s a concept app he posted on Dribbble, but that’s beside the point. Notice the transition within the UI elements when the app is interacted with; it’s so smooth. In this case, the animations make the app feel whole even if it’s so simple as the gliding effect of the inputs when you choose a theme colour for the app. All those transitions and animations make this app a lot more inviting than if they were not there.
Imagine this animation happened when you used me contact form. I bet it would be a pleasant surprise. Most forms, buttons or any type of interaction is usually replacement of elements. if that button just changed to the checkmark with the confirmation copy, ‘Message sent’ you wouldn’t think much of it. But thanks to the animation and the cute bouncy circle, this was a great experience.
That’s how you make an impact. With small, subtle details that otherwise are overlooked. That’s how you can transform something mundane like a confirmation of a sent email message into something fun, interesting and character filled. Besides the fact the above two animations are fun and smooth, they clearly show that visitors that someone put some thought into this. Sadly, most online experiences don’t have animations and are therefore stale. The above two experience are far from it.
Trying something new
Another thing you could aim for is to try a new approach. It has potential to make the user feel like they are experiencing something unique. When it comes to web design it’s not always the best idea to reinvent the wheel but there is always room for some improvement in the more typical experiences.
The above is a concept for Zara’s product page. Isn’t it something else? The photos are big, they are the main focus. The interaction in mainly around seeing the item. It doesn’t totally reinvent the wheel, there are doted pagination to indicate how many photos of the garment and the right hand side is more or less the same as it would be on most eCommerce product pages. But the photos of the item are big, they are unobstructed, they are interesting. This is a unique experience for sure.
Say you’ve searched for a light blue ceramic butter box and landed on this product page, let’s see what you’d be looking at. First, you have a thick navigation with a logo. The logo is a good sign because it tells you who they are even if you didn’t know the company before your search just now. It’s in the left corner – that is nice and familiar. You see that right-hand side of the navigation bar is a little atypical, but you see a hamburger navigation icon and a shopping basket icon, so you’re not entirely confused. It’s not that important right now, so you move on.
The centerpiece of this page is the photo of the item right smack in the middle. I don’t think you notice any of the stuff I described just now because the photo is powerfully displayed with little to no distractions around it. The remaining information about the product like it’s name, price or the CTA to add it to cart are below the big photo. The layout change words as it adds interest to a product page. These ceramic goods have a sense of craftsmanship to them that is also followed through in the well designed layout of this page.
Most of their FAQ page is pretty typical. At the top of their page, they ask you kindly and frankly “How can we help?” with big input field right under; I found this very interesting. It’s honestly refreshing to see such design of such mundane interaction. This is something we see over and over again and although the rest of the page is pretty vanilla the fact that the greeting is different goes a long way. “How can we help?” I think I’m impressed that they did something so simple as to amplify a question and then add well styled input below it.
I love that the input is big – giant even. Coming to this page I feel taken care of because most other websites don’t give much thought to this kind of page. It’s a nice, refreshing change. It’s also important to note how something so trivial as a big heading and a big input field in addition to basic but friendly copy can go so far. Again, it’s not a grandiose, over the top creative way of thinking. It’s just adding a little attention and a little detail to a header of an FAQ page.
What they did to treat this page is simple; they gave it beautiful typography in addition to some decent spacing in order to make a stale and text heavy page feel easy and appealing. Most FAQ pages are in fact text-centric. So are blog posts, and we can make a blog and an article look so damn good. Why can’t we extend this courtesy to the FAQ page? It does seem to me that it was important for them not to downgrade this page just because it holds less importance. It does feel like Oscar followed through with their brand here, and it works.
This page is a small detail that helps pull their brand together and helps them incorporate emotional design. Because this page isn’t visually neglected, it sends a message that Oscar cares to facilitate their brand throughout their whole website, no matter how trivial the page may seem. They’ve found a way to make healthcare feel less daunting to their users. You see it in rest of their site like on the contact form, or the login screen.
Burst of colour
Colour is the easiest way to distinguish personalities, don’t you think? As kids having your favourite colour was so important. Colours provide so much visual information. They are great. You can use a little bit of colour, a lot of colours or even lack of colour to directly influence the type of personality and vibe going on within a design. We learn that early on when we study design.
I have noticed that colour in web design specifically could be put to better use. Especially so on the simpler pages or interactions like a 404 page. Of all these examples this is by far my favourite because it’s the simplest. The Designer News website is not the most impactful page design I’ve seen and that’s okay; it’s just a news feed site, it don’t need much.
Anywho, their 404 page is amazing. The blue background is beautiful and perfect against the white 404. There are only two lines of text on this page which not only pages this page extremely minimal but also highly functional. There are zero distractions – most people don’t need an explanation as to what a 404 error is anymore.
At least not within Desinger New’s audience at least. The single action is beyond straightforward. But that blue, that blue is amazing, it’s vibrant, it’s gorgeous. It’s obviously simple and I love it.
The point of this article is to get you thinking about how you can turn something simple and something mundane and give it some personality. I’d like to think that going through all the various places has helped you as such. It doesn’t take much to make something interesting and I do feel most often what lacks in designs in its last 5% are the simple details that give amazing light into the design.