Analyse This

Hostel World

I have chosen to study Hostel World as part of my Analyse This project due to my love for travelling, therefore I feel I know what the user wants and needs. The Hostel World website uses a bright colour scheme, aligned large picture boxes and bold text. I would like to see if these, along with the layout of the page and other aesthetic design principles affect the usability of the website.

For my second analysis of Hostel World, I will be using Schlatter and Levinson’s Characteristics of Good Interface Design. This consists of 8 main design principles and I will be carefully investigating the ways into how the website performs under these guidelines. After using Morville’s User Experience Honeycomb for my first analysis, I chose this as my second framework because it covers more ground on the design aspect of the website. Secondly, I want to see if it could fit multiple design frameworks and experiment with the ideas around if a good design can fit into multiple principles.

Please click here to download the full video of Kieran using Hostel World.

Principle 1: Elements are organised using alignment.

On the first page of the Hostel World website, everything is centralised and organised uniformly. There are 5 main sections and these can be identified by the bottom arrow that has been integrated into the centre of the background design.

Principle 2: Elements are placed where people expect

The elements that make up the first page are where people would expect and this is demonstrated clearly in the snippet above. Even before the web page has loaded and is displaying a blank white screen, his eyes are set in the middle where the search bar appears. This is great for usability as the first thing you see is an engaging question, “Where do you want to go?”. When I asked Kieran to search for a hostel in Berlin, his eye movement starts in the middle at the main search bar. Assuming he didn’t want to go down the location route of searching ‘Berlin’, he immediately looks to the right hand side of the screen where he finds the menu icon situated at the top.

Principle 3: Similar elements are placed in groups

A carousel is used to display and group together information for both the first and third section. In the first section there are 4 hostel examples and one image for aesthetic, and in the third section there is a group of 3 articles, each with the same header, information and ‘Read More’ button. In the second section, ‘Step Up Your Travel Game’, there are a specific number of images so they can be laid out to have a mirroring effect. The same design rules apply for sections 4 and 5 where elements being placed in groups has aided the user experience by giving the user groups of information rather than randomly scattered pieces of text.

When the user moves through the website to start viewing accommodation, all the information for each one is placed inside it’s own rectangle. Each rectangle has the same layout which includes the name of the hostel, some images, brief location information, the start of it’s description and a ratings bar on the right hand side along with some other handy buttons. It’s also worth mentioning how the search bar at the top is always grouped together with location, check in/check out dates and number of guests.

Principle 4: Fonts are appropriate to the situation

Throughout the website the typeface selection is simple and easy to read. The only time this is irrelevant is for the tag line on the front page ‘Meet the World’ however I believe they have done this to add some artistic flare and have a bit of fun with the way it looks. The legible, sans-serif font used for articles is especially important when used for informative or descriptive pieces of text so the main point can be put across without much effort from the user.

Principle 5: Typographic standards are consistent

The same typeface is used throughout the website for headers, as is the same for main bodies of text. This helps the user to differentiate which is which and have a clearer, faster understanding of what they are looking at. As I made my way through the booking stages, the pages had a clean feel to them because of this consistent typeface element.

Principle 6: Colours are appropriate to the situation

Throughout the website the colours are styled appropriately to suit the situation. The principle 5 GIF showing typographic consistency is also relevant here, but especially so in the ratings box. When the user searches a place to visit and is shown a list of hostels, the ratings icons on the right hand side of each rectangle is colour coded. This is a really helpful feature as it makes important pieces of information harder to miss. If these were only in grey or black they would get lost easily in the rest of the information displayed. These are brought through into the main description of the hostel. Lastly, gold icons used for the awards section is a nice touch because of the natural link we hold for the colour gold and the sense of winning and positivity.

Principle 7: Colours are used consistently

Colour choices throughout the website are used consistently with headers, taglines and bodies of text being the same as the page before. These are shown in the GIFs in the previous principles and can also been seen in the above screenshot of the menu bar. Titles are in small caps and coloured grey whereas the list link options are in orange below.

Principle 8: Controls are deployed and styled consistently

There is a running theme of orange button styling with white text through out the website. This is really helpful to guide the user through the searching and booking journeys inside the site. The user knows through repetition to always look for an orange button with white text if they are wanting to move forward with their request or confirm a booking. Significant buttons including links or ‘points of interest’ for the website have a grey, light opacity button behind them. For example, on the home page, the 5 buttons in the top right are styled this way, as is the first search bar along with the titles of the articles in front of the images.

Conclusion

In conclusion, this framework works very well with the Hostel World website and each principle can be sturdily applied. I have learnt a lot about what makes an appealing and easy to use design, such as consistency and particular placing.

Bibliography

Hostelworld. (2017). Hostels Worldwide – Online Hostel Bookings, Ratings and Reviews. [online] Available at: https://www.hostelworld.com [Accessed 10 Oct. 2017].

Schlatter, T & Levinson, D. (2013) Visual Usability, Principles and Practices for Designing Digital Applications, Morgan Kaufmann, Burlington, MA. [Accessed 10 Oct. 2017].