Trends in Interactive Web Design

By Dan Yoachim  ·   February 1, 2015  ·  5 minute read

Topics: Apprenticeship User Experience

Explaining the nuances within trending practices: mobile first, material design, typography, flat design, shallow websites, page size and speed, and menus.

Dan Yoachim is Neoteric Design’s spring 2015 apprentice, researching topics on interactive documentaries, javascript driven user interfaces, and front end development. 

Mobile First

Designing the first iteration of a site with the mobile experience in mind has been a trending for a least a couple years now. With the rise of interactive design, this is no different. Mobile First’s general principles of simplicity and progressive iteration align excellently with our goals of a crisp interface and a smooth user experience. In addition to helping us consider what elements on the page are necessary and present a reasonable layout, Mobile First leads us to consider methods of user input. On a touchscreen, there’s no ability to :hover for example. Using a finger is also much less accurate than a mouse, so small targets can lead to frustration. The lack of a keyboard also removes secondary control options like arrow keys or the spacebar.

Additionally, mobile devices typically have less processing power than laptops or desktop machines, which could limit some high-complexity animations or scripts. Data can also be limited due to the nature of their networks. Some HMTL5 elements can behave differently on mobile because of this. The video and audio elements will not preload nor auto-play on most mobile devices in an attempt to save users unwanted bandwidth usage.

Regardless, if you do start with mobile or not, its worth examining if the interface you’re looking to create can be made intuitive and smooth given limited input methods. It’s much easier to add an input device than it is to remove one after you’ve started.

Material Design

Material Design is a term coined by Google referring to digital elements behaving according to real world objects. This means we should avoid behaviors that are impossible with physical objects when designing our digital ones. A sheet of paper is unable to pass through another page, so it doesn’t make sense to have one content div pass through another. Similarly, objects don’t just appear from nothing or change size instantly. A small slide in/out motion, or a fast growing/shrinking animation can help users feel more comfortable and to better understand the interface context.

Read more about Material Design

Typography

Type has always been important in design, ands that’s not something that’s going to change. With the advent of CSS3 designers were given much more freedom in using fonts, and consequently efforts to present clean and legible fonts have grown dramatically. Choosing a font that confers the right mood, has the correct line spacing, and is legible and balanced on the page goes a long way in making users feel calm and at home on your site.

Flat and Simple Design

Over the last two years, flat design has taken the mantle from realistic theming (also called skeuomorphic design). Though not right for all contexts, flat designs have grown in popularity for their simple and easy to process design, crisp visuals. Flat design is characterized by minimalist designs with open spaces, well defined lines, and bold solid colors. It focuses on usability and rebukes fluff on pages. This contrasts with realistic design, where elements are given shadows and reflections to better emulate three dimentional objects. Real world textures are also commonly used to convey familiarity and context. There are pros and cons to both approaches, so it’s important to consider your use case.

Shallow websites

Websites are becoming much shallower than in the past. It’s been found that users will generally prefer scrolling to clicking through a site. This makes some sense in that its an easier motion requiring less accuracy and retains the context of the landing page. In response, websites have moved toward shallow structuring or single page layouts. In cases where the front page is longer, anchoring links can be used to navigate the page. This has an advantage of being easier for desktop users to parse, but the true gains can be found on mobile where scrolling is even more heavily biased.  

Page size and speed

The size of websites has grown significantly over time, especially in the last couple years. Bandwidth speed is increasing too of course, but it’s not keeping up. This trend is being fueled by several factors, but the major factor is media assets. More and more images are being placed on sites, and they’re larger in size and higher in detail. With the advent of Retina screens this concern has grown, as image assets effectively doubled in size. On top of this, the capabilities of javascript within a browser have grown. More scripting being sent and run means slower downloads and page speeds, which can hit interactions especially hard. Animations and interactions that don’t play smoothly are incredibly damaging to a users perception of a site, and will often create very negative experiences regardless of how well rest of the site works. Since percieved speed and quality critical to a successful site, it’s important to keep browser efficiency in mind when designing interactions, and to make sure all assets are appropriately sized for delivery.

Menus have been shrinking recently. With space being at a premium on mobile devices, it doesn’t make sense to have large navigation elements at the top of the page. Having the above-the-fold content occupy half of the screen is unweildly on a mobile device, so many designers choose to collapse the element. This is typically done through an element sliding into view from the edge of the screen, or to grow out of an icon. This provides more space for the user, a more compact context for the site, and an excuse for some slick animation.