Wednesday, 9 November 2016

Examples of good and bad website interfaces

Imboldn


http://www.imboldn.com/

This is far from the worst example, but there's no reason for the top navigation bar to be so big. It creates a very annoying, inefficient and claustrophobic experience, particularly when it's obscuring such beautiful content. The negative experience is exacerbated on this site by the significantly low amount of content displayed on one page, meaning you have to click through dozens of pages to see a considerable amount. 


It'd make a lot more sense to have an infinitely-scrolling website similar to what Pinterest does (see below) in order to keep the user's attention and interest without them getting bored of interaction-fatigue due to the need to click 'next page' so much. 



www.pinterest.com - a good example of infinite scrolling



Reddit




Reddit is an outlier in the world of massively popular social networks. It has a dated, cluttered, and difficult to use interface which is arguably by design in order to reflect the sheer mass of information on the site. Whether or not that was the purpose, the fact remains: Reddit is difficult to use, and for that reason it limits its user base.


Apple







Since 2000, the actual experience of using the Apple website has remained unchanged. This is impressive. The interface visuals have adapted to the times and been modernised over the years, but the way in which you actually interact with the site is basically the same, which is a huge nod to how successful an experience it is. The same cannot be said for almost any other site, including Apple's main competitor, Microsoft: 



Microsoft website, 2010


Microsoft website, 2016


Tesla

A ubiquitous trend in contemporary interface design is the use of hero images, particularly as a banner which may or may not scroll. Sometimes the entire home page can be used to house a hero image. Apple arguably kicked off the trend, but it can be seen on almost any tech/product site now. Tesla makes particularly good use of them, as seen below. 






www.tesla.com


A hero image is present on almost every single page on the Tesla site. They don't get in the way, they only enhance and bring forward the reason the page is there. Everything is made exciting; something as ostensibly dull as a home battery system is made to look sophisticated, trendy and desirable. People who see that image want that product. Broadly, hero images can help to epitomise what a product stands for; what it's all about, why it exists, and the best-case use of it. They highlight the very best features of the design, and often present the product in a way or place where users can imagine themselves there in an entirely positive scenario. Usually a very brief description accompanies the image along with one or more action buttons. 


BBC News



The BBC News site is a really great example of visual hierarchy, and how a huge amount of information can be presented in an effective and attractive way. A grid system is utilised to display stories based on their significance, and as the stories become less significant, so does the way in which they are displayed. On an average news day you have one main news story with a large photo and the largest type on the page. You then have secondary news items with a smaller photo and smaller type, and then the lowest-priority news items are text only. 




In very major news events, a banner which extends the full width of the page is used. Sub-headers and sub-stories related to the main news is also present underneath, reinforcing how important an issue it is and making sure people are presented with enough information to remain up-to-date. 



In events which are happening live, such as the Olympics or political elections, a full-width banner is also used, but often they're accompanied by live infographics and data charts which display potentially complex information in a simple and bold manner. 






No comments:

Post a Comment