Web Log = Blog

divider
This is how the word blog came into existence.

People leaving your site without browsing for a long time

The things that made a website interesting are the interactions user have with it. They spend a long time browsing because it is amusedly interesting to interact with. As the languages of web development continue to grow, web interaction was no longer limited. Here are some techniques that will provide a good amount of sense of interactivity:

  • Long scrolling and parallax scrolling

  • Card UI

  • Video and animation

  • Swiping and clicking

  • Mircrointeractions

  • Push Notifications

  • Control over hiding / reavealing content

Before we go through some of the techniques above, we need to understand the foundation of how interaction tends to lead to a better user experience design (UX) which is described in Interaction Design Best Practices:

5 Pillars of Interaction Design

Goal-driven Design

When designing your interactions, make sure you have a goal in mind which is helping your users to get to their goals. Hence, you need to understand your users via personas, scenarios and experience maps.

Usability

Before a feature you plan can meet your users’ emotionally needs. You must ensure that the feature must be reliably functional first.

Signifiers

Icon or images tends to catch people attention or maybe a sign’s physical form such as a mailbox icon which intuitively suggest function, which makes them significant shortcuts without the needs to express much words.

Learnaility

Interfaces are design in a consistent manner because it will make the learning process more naturally. As users get more familiar with it, overall usability will increase because not much thinking is needed to figure out how to interact with the interface.

Feedback and response time

Feedback represents your role in the conversation. Hence, your responses must feel human like in order for users to feel the interaction between you and them.

"Webgraphics"

Webgraphics, a term stamped by VentureBeat states that infographics are getting outdates and Webgraphics are the new trend in the web. Web development languages like HTML5 and CSS enables webgraphics to deliver the same information as infographics but in a way more interesting way. As a conclusion, webgraphics need interaction from the users to reveal additional information they need.Here is an example from Safety on the Slopes where they create a “site within a site” experience. Think of the information you are giving are like lectures from you. If your lectures are presented in a boring manner, the students will get bored but if you display it in a format that seems interesting. It will make it less boring and interesting to interact with.

Photo Credit: Safety on the Slopes

 

Well what if you have no facts or pictures to display? No worries, you can look at the example from luxury fashion brand House of Borel in how they use webgraphics to apply some interactive techniques to make it as interesting as the one above:

Photo Credit: House of Borel

They implement a video triggered scroll in their “About Us” page where it will create a narrative that will bring their brand to live or provide a more emotional level than your average websites.

Microinteractions

Microinteractions are what we call the momentary events that add up to create the final experience that the user should feel from your interface. For instance, an active experience such as clicking the “Like” button or a passive experience where users will hear a “ding” when a new message has arrived. An example would be Inside Abbey Road from google.

Photo Credit: Abbey Road

When designing an interactive interface, microinteractions are fitted in to act as the following:

  • Accomplishing a task such as sending an email

  • Create a connection between two apps, devices or websites which is microinteractions are able to connect elements

  • Adjusting settings such as volume adjustments to your videos or music.

  • To exhibit a change in state such as entering the site or exiting it

  • Data feedback in real time which will react to a request upon click such as data from a weather app.

To give you guys a feel of it, look at some of the website below:

  • AIGA 100 Years of Design, they implement animations and signifiers such as hamburger menu to support scroll-heavy navigation in their website

Photo Credit: AIGA 100 Years of Design

  • Eventbrite Seat Designer which implemented simple techniques such as simple menus, flat design and a smooth-loading transitions which allows users to make custom seating charts.

Photo Credit: Eventbrite Seat Designer

  • Sonoran’s Valley uses phenomenal animations and videos effects which provides a  game-like experienc and maintaining a standard hamburger style navigation

Photo Credit: Sonoran’s Valley

Now you know how to effectively design an interactive interface. Here are some free resources and tools you can use:

  • WhatFont to find out the font a website uses

  • Going Bigger with Typography which is a guide from DesignModo, good examples available there

  • Beautiful Web Type by Google Fonts which provide a list of live examples of stellar typography

Source: Web Design Book of Trends 2015-2016, by UXPin

Thumbnail: Designed by Freepik

 



Share Us


Loading...