As we near the end of 2015, web design blogs are a-flutter over what they predict will be the hippest, coolest things in web design next year. While there is rarely full and total consensus, there are a few trends that seem to be permeating across the blogosphere and are worth taking a deeper look…
PREDICTABLE UI PATTERNS
What is this? First, I should define the term ‘UI’ – for those who aren’t fluent in design jargon (which, let’s face it, is pretty much anyone who isn’t a certified web geek). UI stands for user interface and is used to describe elements used on a site to guide the end-user to specific actions through iconography and / or layout placement. With the rise of responsive design and theme-based site-builders like WordPress, the side-effect of sites that look similar in layout and features has increased over the last couple of years.
UI patterns can take several forms such as; hamburger menus, account registration forms, and checkout icons on the clickable elements side; and long scrolling sites, card layouts, and hero banner images on the layout side.
It’s important though to understand that these conventions of design aren’t necessarily a bad thing, since visual convention and predictable patterning allow designers to guide the end-user through a smooth web experience. And there is an expectation on the part of end-users as to where certain things should be placed within any particular design layout. It’s why our sites generally find the firm name in the upper left, phone with supporting content in the upper right, followed by a search icon, map pin and hamburger menu icon to get the end-user going.
At the end of the day, end-users appreciate predictability and convention to guide them through sites and so these symbols and layout conventions are important and not a reason to “reinvent the wheel” anytime soon.
RESPONSIVE DESIGN
With the spring rollout of Google’s mobile-friendly update, it is very clear that responsive design isn’t going anywhere and mobile usage is increasing by the day. Responsive allows businesses to seamlessly implement user-friendly environments at each stage of an end-user’s technology. With that said, it’s important to understand that responsive design should really and actually approximate the full site experience at each break point / screen size of any given technology through the process of stacking.
Now when I say, “approximate”, what I’m referring to is selecting the most important features and benefits to display at each stage and hiding those extra elements that may not support the conversion opportunities on any given site. I mean, let’s face it, iPhone users probably don’t care how many associations a client belongs to. They want the phone number, the location and the business’ opening hours at their fingertips and without having to endlessly scroll to find it.
As we continue to refine this process, there are some important conventions here as well, once a site moves into the mobile environment and general rules we adhere to:
- We remove banner area jQuery animations to reduce data usage, page weight, and site load times
- We use images that are also responsive and are defined using a percentage model
- We encourage a consolidation of menus, replacement of short forms and video players with a button link to streamline visuals
- We include a “back to top” feature to ensure strong user experience
- We consolidate banners on internal pages to allow page titles and initial body copy to appear within the initial view screen in the mobile environment
FLAT DESIGN IS HERE TO STAY – AND WE SHOULD USE IT MORE
In conjunction with responsive design (and the bonus push to concise design along with it), the use of flat, semi-flat and material design (which uses shadowing effect and “movement concepts” to convey depth and 3-dimensions on a page) is another technique that can allow for visual streamlining and a clean look and feel that can reduce a site’s weight, especially in mobile environments.
Flat design rose along with the popularization of iPhone and the Windows 8 launch, which married the use of card layout design with bold colour and clean, minimal icons with clear, readable text to guide the end-user to their destination. Flat icons and images can be saved down to quite small file sizes, which allows for a overall faster load time – and a quick loading site is good for everybody.
ANIMATION? MAYBE.
Animation is still pretty high on the list of many predictions of design trends through 2016, but for our purposes, there really should be a caveat to how and when animation should be included on a client’s site, and it’s simple:
Will this site truly benefit from the additional load time that will be incurred by adding animation?
If the short answer is no, then it shouldn’t be included in the final project, and here’s why:
- Animation is a roadblock to content because it visually distracts the end-user. It’s smoke and mirrors. That said, if your body copy is overly thin and doesn’t convey a strong narrative explaining the client’s brand message then okay, animation could help. But this is a rare occurrence on the vast majority of projects we work on here, so the need of animation to establish a client’s brand isn’t necessary.
- Animation distracts an end-user from the more important conversion opportunities. For the same reasons as above – animation is generally “all about the pretty”, when our design focus has shifted in the last 18-24 months to visually supporting the content and search strategies in a clear manner.
- Animation is not well-supported in mobile environments. This should be self-explanatory. But think of yourself on your iPhone or Android device, you log on to X-website, you’re using cellular data because you’re in your car and you’ve just been in a fender-bender. You search for a lawyer and you tap on the first result that pops up on your browser and then WHAM!
***Loading***
***Loading***
***Loading***
You’re stuck in this hades of waiting because the lawyer you’re trying to contact has animation and now you’re waiting for this site to load, when all you really want is to get a phone number. I don’t know about you, but I’m out of there. The minute I see the word, “loading” I’m hitting my back button and going to the next guy.
There are some effective uses for animation that can be helpful and can enhance a site’s narrative. These are known as “rich animation”, and includes big features such as parallax, lazy loading and video backgrounds all the way down to navigation hover animations.
On the more traditional front – the use of a simple jQuery slideshow with some supporting text and a link button becomes a little trickier. We still want to present rich, narrative content that supports the overall brand messaging all without compromising the site’s content placement, which is highly important from a digital marketing (SEO) standpoint. So we look to have an even deeper partnership with the content writers to achieve this goal.
UNIQUE, CUSTOMIZED EXPERIENCES
There are many of us who are pretty aggressively pushing the use of personal, custom photography. As I’ve written about before, custom photos allow us to craft a truly unique experience that connects to end-users in a more honest and personal way than stock images. There are other ways in which we can explore the uniqueness factor that I hope we can further explore in 2016, such as unique ways of using the grid, hand-drawn illustrations, cinemagraphs (which would only be effective on very specific sites) and other such features.
The biggest opportunity though is in the first option – custom photography. As we continue to see more and more players in the market, the opportunity to offer a quick, down-and-dirty option for a unique end-user experience.