To What Extent Are The Current Web Trends (2013-14) Improving User Experience and Accessibility?
The web moves at a rapid pace as technology becomes more advanced and accessible. This means that web trends also progress and change quickly, and due to these advancements they are becoming more accessible to everyone who uses the Internet. This past year has seen the continuing trend of responsive sites due to the vast amount of screen sizes that are available now, as well as new trends such as parallax scrolling and type led designs due to the development of HTML5 and CSS3 being implemented in the major browsers now. Developers and designers have a responsibility to make their sites accessible to everyone, as the ‘web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability’ (Accessibility ). Although, designing with this in mind does benefit everyone as it improves the usability of a site overall and makes it more straightforward for all users, which web designer Laura Kalbag supports by saying ‘it widens the audience that your website will target, and in turn will attract more visitors’ (Kalbag, 2013).
This essay will look at the most popular web trends that have been the focus of the past year and how these have improved the experience for the user and how they have made looking at websites for accessible for everyone as a whole. It will specifically look at responsive design, which has been a leading trend for a couple of years now; flat user interface and colour which has overtaken skeuomorphism and typography based sites which has grown now web fonts have been widely developed.
Starting with the longest running trend, responsive design, it has been so popular some people are saying it’s the solution to adaptive screen sizes. For example, Ethan Marcotte, a designer and developer who coined the term ‘responsive design’ (Marcotte, Ethan Marcotte on Responsive Web Design, 2012) describes it as offering ‘us a way forward, finally allowing us to ‘design for the ebb and flow of things’’ (Marcotte, 2010).
It has been implemented on so many sites that people now expect it when looking at a website as though it is the norm. It is the adaption of a site layout that changes depending on the screen size it is being viewed on so that it fits accordingly. This means rather than having a separate mobile site or having to be ‘pinching and zooming our way through sites designed for a much larger screen’ (McGrane, 2012), it adapts for your device with ease.
It is absolutely necessary for the web that the development of websites progress at the same speed as new devices are being introduced to the market to make sure the user experience isn’t affected in a negative way by developers not keeping updated with the technology. Maryam Taheri suggests responsive design is up-to-date with technology, because it ‘allows users to better read and experience the web’ (Taheri, 2013). Users get frustrated when a site doesn’t work on their mobile and tablet as it does on their desktop, which supports the point that it lets people ‘better read and experience’ websites.
Laura Kalbag also supports the idea that responsive design is the way forward with the advancement of new devices as she states the reason that designers started creating responsive designs was so ‘we could be more future-friendly, and with a shared goal of better optimised experiences’ (Kalbag, 2013). The idea of responsive design being future-friendly is why responsive design is one of the leading trends in improving accessibility and usability on the Internet.
There are statistics to support that tablets and mobile phones are the future, such as Telecom TV stating that in 2013 tablet sales ‘grew 33 per cent to reach 227m’ (TelecomTV One, 2014), which shows the demand for responsive design in tablets. There is also a demand for responsive in mobiles as there are ‘a growing number of people who cannot afford to pay for both mobile phone and broadband Internet access pick one device – the phone.’ People using their mobile to use the Internet aren’t in the minority anymore, as ‘of early 2012, 88% of American adults’ (McGrane, 2012) have a mobile phone, and responsive design acknowledges that. With people not being able to afford broadband, and choosing a mobile instead, it would be unfair if websites weren’t responsive (or didn’t have a separate mobile site) to support this.
Although it can be argued that having a separate mobile site is just as good, or if not better, than having a responsive design, one of the advantages of responsive is that ‘changes to your site need only be made once, and content can be run through a single CMS’ (Bustos, 2013). This is better for the client as they only have to update their content for one site and this saves on time and money, as well as giving the user all of the same information at once.
This is why responsive design not only improves accessibility for people who aren’t necessarily using a desktop for browsing, but also for the people who update the content of their website, and the users who look at the content of the site.
Linda Bustos looks at some of the issues of responsive web design, and one of them is that page loading is slower because the ‘browser must load content from the universal HTML file’ (Bustos, 2013) and then ‘process instructions to avoid certain scripts, CSS and media’ (Bustos, 2013) which is even more code to process. With this in mind, people who are using their mobile phones to access the Internet may not have the time to wait for a page to load if they are on the move, at work or in a location with limited Internet connection. This can reduce traffic that a site gets, and can affect ‘conversion rates, customer satisfaction and loyalty’ (Bustos, 2013). This does affect the usability of a site if it takes longer to load, but it isn’t that big of a weakness when comparing it to a website which isn’t responsive or has a separate mobile site.
Another issue that can affect accessibility is the cost of a responsive website. ‘Because of its complexity, responsive design has a reputation for costing a lot of money’ (Bustos, 2013), and with regards to accessibility, this affects the small businesses that can’t afford to pay for a responsive website.
However, where it falls short in cost and loading time, it actually works well with another popular web trend – flat design. Although flat user interface and colour have been used for a while now, it wasn’t until the release of iOS 7 that people have been recognising it as one of the latest web trends. This is the turn away from the skeuomorphic design that used to dominate the web into clean, simple use of colour and shape.
Adrian Taylor talks about one of the advantages by using flat design, which is that there is a ‘reduction in page weight and loading time’ (Taylor, 2013). This helps with the issue in responsive design that it can take longer to load than an unresponsive site as it doesn’t take as much processing. This improves usability for users because they can access the information they need quicker and are more likely to stay on the site rather than leaving because it hasn’t loaded fast enough.
Another way in which the aesthetics of flat design and the functionality of responsive design work well together is the use of modules. A responsive layout needs to be able to adapt to different screen sizes by using modules, and David Kizler states that these ‘need whitespace which creates part of a flat aesthetic’ (Kizler, 2013). To support the fact that responsive design and flat design work well together, Taylor points out that ‘UIs have had to become more fluid, and the responsive design movement has responded’ (Taylor, 2013). By a user interface being more fluid, they scale up and down well, which work with the adaptive aspect of responsive.
An article on the 10 web design trends in 2013 by the Awwwards Team backs Taylor’s point that the fluidity of flat design responds well to the scalability needed in responsive design by saying that the trend ‘responds to the need to create adaptive projects and serve images and scalable elements to retina displays with excellent performance on 3G connections’ (Awwwards Team, 2013). This also points out that flat design works well on retina displays, and this is because the use of flat colour and text doesn’t have characteristics such as texture or extreme gradients and so they ‘perform as good as the screen and browser allows’ (Kizler, 2013).
The clean, minimal characteristics of flat design are what appeal to users, as Taylor says that ‘a reduction of clutter in a user interface (UI) can create a little visual zen’ (Taylor, 2013). The world of web has exploded into a myriad of information, and helps the user cope with the content overload and creates a simpler, uncluttered view to make it easier to digest. When using a mobile device it is particularly easy for users to read because they have to look at the content on a lot smaller screen than that of a desktop of tablet.
To support Taylor’s point that flat design creates a better visual experience for the user, Wix Blog published an article noting that the trend engages users ‘by making the design elements clear and readable’ (Wix, 2013). Making a design clear and readable is very important to the user experience because it encourages them to stay on a site and use it, which in turn is good for the company who owns the website. It will also appeal to more people if it is readable because more people will be able to understand it, especially if they’re not particularly tech-savvy.
However, there are a few people that argue the characteristics of flat design are actually harder for people to understand and read, because it is harder to distinguish between different elements since they don’t look ‘bevelled, bulged, clickable or otherwise realistic’ (Wix, 2013). This could suggest that actually skeuomorphic design was easier for users, and flat design hasn’t improved usability. Jakob Nielsen supports Jessica Enders opinion on the matter, and talks about the problem when it comes to user experience on tablets in his article ‘Tablet Usability’. He says that designers ‘need a middle ground between skeuomorphism and a dearth of distinguishing signifiers for UI elements’ (Nielsen, 2013). His point is that there is a lack of indicators for users to see whether something is a link or a button and so on. This affects a user’s usability because they might not be able to efficiently and effectively use the site to their advantage if they can’t find the commands and elements they need to use.
Jessica Enders discusses one particular example where it can affect someone’s usability is if they problems with their vision. A common characteristic of flat design is that it uses a limited colour palette, and around ‘2.7 million people’ (Colour Blind Awareness) in the UK have colour deficiency. Ender’s discusses this idea that if ‘colour is the only thing distinguishing non-clickable text from clickable links’ (Enders, 2013), then this will effectively making usability hard for 4.5% of the UK population as they won’t be able to see a difference in the elements. She also discusses that to make forms more recognisable for users designers should ‘make your fields look hollow and make your buttons look raised’ (Enders, 2013). This shows an example of how a users experience can be improved, and this would involve combing flat and skeuomorphic design together like Nielsen suggests designers should do.
So although this trend is incredibly popular, and some people are suggesting it might be long-lasting because of ‘Apple’s recent radical redesign of iOS 7, embracing a more minimalistic and flatter design, is the ultimate proof that ‘flat’ is here to stay’ (Wix, 2013), it doesn’t work for every website and can actually affect the usability of a site to people who have trouble distinguishing elements which don’t have multiple identifying qualities.
Another trend which also ties in with flat design is the more experimental use of typography on websites. Taheri says that a characteristic of flat design involves ‘crisp typography’ (Taheri, 2013), which is now possible to achieve on the web because of two reasons – screen resolution on different devices and advancements in web fonts. Different fonts can be rendered better and easier than before now, particularly thin ones which are popular with flat design, and Adrian Taylor agrees as he says ‘as screen size and pixel density continue to increase on mobile devices, thinner and smaller type can be presented with better clarity’ (Taylor, 2013). As more people use their mobile phones for the Internet, resolution on their screens have improved dramatically, and this makes it easier for people to read fonts and use sites on smaller screens.
One of the web font services that has created a wider choice of fonts for designers to use on their sites is font-face. Ian Lynam and Craig Mod have spoken about the potential this brings for web typography by saying ‘@font-face brings with it the hope of a standard, cross-platform, cross-browser, lightweight method for referencing font-files not found on end users’ computer’ (Mod & Lynam, 2009). Previously, designers could only choose from the fonts that people had on their computers by default, but this allows a browser to retrieve fonts straight from the server, increasing the amount of fonts they can use. Creativebloq supports the fact that typographical based designs have become popular since the growth of web fonts by saying ‘it was almost inevitable that we’d see a surge in typography-led design on the web’ (CreativeBloq, 2013).
This has also improved accessibility for people for a number of reasons. For example, a bad habit for designers would be to use pictures of text on websites for custom fonts, but this meant that browsers couldn’t translate them into different languages. This stopped people from accessing the information they needed if they didn’t speak that language, reducing accessibility substantially. But now there is a bigger selection of fonts due to sites like font-face, designers can pick a font that they want to use without affecting their design or accessibility for users who speak different languages. It also meant that if people wanted to make the text larger by zooming in, the text wouldn’t alter point size – the picture would just become pixelated, reducing the readability for the user, whereas now they can magnify the screen with no problem.
However, there is an issue with using services such as font-face and Google Web Fonts, with designers misusing them. Alan Stearns discusses how incorrectly using fonts or their rules can actually cause the browser to create a bold or italic version of the type which can affect legibility. Stearns points out that the issue is affecting fonts from these services as ‘these faux face styles aren’t much of an issue with web-safe fonts, as most of these fonts include bold and italic styles’ (Stearns, 2012). If a browser compensates and makes a font bold or italic itself, it can make the text illegible as they ‘appear as a smeared version of regular glyphs’ (Stearns, 2012). This will affect usability of a website because the text will be harder to read which can be a strain for the user’s eyes, especially if they have poor vision and suffer from conditions like ‘astigmatism, colour blindness (or) akinetopsia’ (Kalbag, 2013). So there are conflicting opinions on whether web font services have helped improved typography on the web which has led it to become one of this year’s top trends, but overall it can be suggested that they have. This is because they have helped expand the collection of fonts available to designers which improves accessibility for them when designing for web, as well as becoming more dynamic like print. It has also improved accessibility for the user, with fonts being able to be rendered more clearly due to higher screen resolution and less designers using pictures as text.
In conclusion, it can be argued that the current web trends – responsive design, flat design and typography based design – have shown changes in user accessibility and usability. However, it can also be said that the trends derived from visual style movements such as flat design will probably not stand the test of time as opposed to their more substantial counterparts, like responsive design. This is because they help dramatically improve the usability and accessibility, therefore contributing to the overall evolution of web design. Seeing how long responsive design has lasted, (around 3-4 years) and how it is still thriving in popularity against previous web trends of just 1 year only furthers this point. 2015 will see whether flat design and typography led websites will follow this lead or if style will override substance.
Leave your comment