The BarbLog

Design, front-end dev and other random thoughts

ux

All of the posts under the "ux" tag.

Barbara February 3, 2014 Leave A Comment Permalink

3 Examples of Good Websites

For this assignment my aim was to choose three quite different websites so it’s not just about some well-known and ‘safe’ designs. I did go for one well-known one though, as there is most likely a reason it’s so popular.

Click on the screenshots to enlarge them and the section titles to visit the live websites.

1. Dropbox.com

Dropbox website screenshot Dropbox website screenshot  Dropbox website screenshot Dropbox website screenshot

Dropbox is a popular online backup and file sharing solution and if you look at the website I don’t think you’ll be left wondering why. It’s extremely clean and simple to use but still retains a playful touch (i.e. it doesn’t feel like a cold corporate style website) with the little icons it uses on tabs and the sketchy graphic advertising Dropbox for Businesses on the second screengrab.  After all, this is your backup space, you have your personal files on there so you don’t want it to feel too impersonal.

Even more importantly though, it’s very straightforward to navigate and helps you out with tips highlighted in light blue at the top of the page (3rd and 4th screengrab). It has a separate view for files and photos, makes it simple to access your upload history and remaining storage space, and lets you download whole folders as zip files – handy! Dropbox can be installed on your computer making these things unnecessary for many people since it’ll sync automatically, but for those who for any reason don’t want to install it and prefer to use the website (myself included) it makes life much easier.

To sum up, the main things the Dropbox site has going for it in terms of good UX and design:

  • Simple and clean layout that nevertheless retains a friendly touch
  • Lots of white space allowing for visual separation of elements
  • Navigation is self-explanatory and doesn’t have too many levels
  • Functionality is easy to detect (eg. downloading as a zip file – the command is clearly visible)
  • Right-clicking on stored files triggers actions (more intuitive as it’s similar to using your computer)

2. Howmuchtomakeanapp.com

Howmuchtomakeanapp.com screenshot Howmuchtomakeanapp.com screenshotHowmuchtomakeanapp.com screenshot  Howmuchtomakeanapp.com screenshot

I really liked the concept of this site: it takes you through the estimating process for a new app (or website, works for that too) and all you have to do is choose from the options it presents. The layout is extremely simple and intuitive, with graphics used as buttons to make it easier to skim your options. There is a progress slider that steadily moves as the estimated costs increase based on your choices so you  know where you’re at at every step. At the end it gives you a breakdown of what you chose and how much it estimates, with an explanation of how it arrived at that figure. Just like Dropbox, it’s very clean and functional but the graphics make it more interesting and engaging than if it was only a bare-bones text-only tool.

The call to action is very clear at the end in red: submit your project using the Oomf website! It’s promotion of course, but subtle and not too pushy; the user can still feel like they’re in control and not being forced to do anything which in my book is always a positive in today’s world of ads shoved down our throats at every opportunity.

Having discussed the function of the site I still think form is worth a mention (can’t help it – I like pretty things!). The jQuery flip/fade effects when you click one of the options to progress to the next screen are rather pleasing to the eye, providing an odd sense of satisfaction reminiscent of  your childhood when pressing buttons in lifts and on trains was something you loved doing. Well, I did… surely I’m not alone with this?

Good points about this one:

  • Clean and simple design
  • Straightforward user journey
  • Easy to understand functionality
  • Pleasing feedback (progress bar, flipping buttons)
  • Summary of results is clear and helpful

3. SamMarkiewi.cz

Sam Markiewicz porfolio website screenshot
Sam Markiewicz porfolio website screenshot Sam Markiewicz porfolio website screenshot Sam Markiewicz porfolio website screenshot

This is a portfolio site of sorts, trying to sell the services of its owner, and as such it has to stand out from the thousands of other portfolio sites out there. It achieves this with humour and interactivity. It’s a one page parallax website which may or may not be everyone’s cup of tea but I think that in this case it really adds to the experience – check the link out to see for yourself!

Starting off with the witty choice of domain name, creativity is all over this website in my opinion and this is the most important aspect of a portfolio. The home page makes use of plenty of white space to draw your eye to the text and the poor guy standing there without clothes: and you just have to scroll down to see the rest and dress him appropriately! Not only can you dress him in a pink basketball outfit though but also explore his environment by hovering or clicking the mouse over certain elements such as his computer or the Twitter bird (it even flutters around). Curiosity is one of the most basic human traits so he does well to engage the viewer in this way.

The copy itself is kept simple, approachable and friendly; I got the impression that Sam must be a nice and reliable guy to work with which is important from a client’s perspective. The typography is an easy to read sans serif, lending a clean and minimal look to the site.

Sam also provides guidance on how to best view his page in the form of an overlay when you first visit the page, accessible later on via a button in the top right corner, never a bad thing when it’s important to make sure your audience views your content as it was intended. Of course we could debate this in general but in terms of what he wanted to present here I think we can say it’s not a problem to limit it to desktops otherwise the effect would not be the same.

Good points about this site:

  • Creative use of parallax scrolling
  • Uncluttered design drawing attention to the important parts
  • Engaging and colourful
  • Designer makes a good impression on the viewer

Summary

I didn’t deliberately choose these designs based on their looks but in hindsight they all look clean and simple with only a few accent colours. This doesn’t mean I don’t like more ‘cluttered’ websites but I think the general trend these days towards flat and minimal designs has influenced my tastes as well.

Barbara September 30, 2013 Leave A Comment Permalink

The importance of good UX and planning

‘Name the top three factors that make a good website’ – this was the task we tackled in groups on our first proper day of teaching, and the one that every group included, that is arguably the most important of all, is the user experience (UX). No fancy design or witty content will make your website successful if the user can’t find what they’re looking for, or has trouble accessing your content even if they do know where to look.  I’m a project manager and the first line of client support at a company that develops websites on their bespoke CMS platform, and this task made me think about times when I came across examples of this problem in my job (we don’t do design, only implementation, so we are presented with the signed-off templates already). Often, planning is not carried out as extensively as it should and design seems to become more important than making sure a site presents its otherwise relevant and useful content in a clear and user-friendly way.

The most recent example happened only last week, when I had to amend something on one of our clients’ sites I rarely need to access. I wasn’t familiar with it and when I had to find a certain feature I struggled; we can probably safely say a new potential customer would as well. I was working on the pages jointly with a colleague and he also said he found the site a bit difficult to use – and he’s used it a lot more than I have! This is a client that sells luxury products and the website is beautiful in terms of colours, graphics and typography, but perhaps in their quest to create something beautiful the designers forgot about making it usable as well.

The other important aspect related to UX to consider when creating a website is information architecture hand in hand with planning. If your information isn’t structured properly then the UX will be poor however well-designed the user interface itself might be, and good information architecture obviously involves meticulous planning. I am at times baffled by websites that don’t appear to have had sufficient thought going into them in the planning stage; this is where a project manager should come into the picture and set out the processes the team and client should adhere to before doing any visuals. The excellent Web Style Guide by Patrick J. Lynch and Sarah Horton dedicates its whole first chapter to processes and planning; I strongly recommend reading it as it may highlight things to consider that you might not have thought of before – I learned a lot from it despite having experience in managing web projects. It’s a great read otherwise as well, by the way.

As an example I can again offer two of our clients who had a site built relatively recently and had had plans to incorporate lots of extra information after some time but this doesn’t appear to have been considered during the design process.  Now we have to make do with the available layout and try adding bits and pieces without changing too much; it would have been much more straightforward to make the design flexible enough to accommodate the changes in information that would come up and plan the UI and UX accordingly instead of trying to squeeze it into the existing setup. To have another example here, I personally find the HMRC website somewhat confusing to use as well; I have tried and failed on multiple occasions to find a definitive answer to some questions I had about self-employment and NI contributions as there are so many links directing you to different areas of the website and suggesting conflicting solutions… I ended up having to call their support helpline. Anyone else with this problem or am I just HMRC-ically challenged?

Barbara September 21, 2013 2 Comments Permalink

get_footer() ?>