Wednesday, February 8

Communicating with Interactions

Subtle interactive elements truely teaches a users to understand how things work. It is important to not look at animations or motion graphics to be just decorative. They can communicate processes from start to finish and draw a clear line between a smooth functioning site. 

Scroll Down

There are basic treatments made to elements of a website that seem small but mean a great deal. Even though they are commonly seen and the average person my not even realize it until the interaction is not there. Below are some of these features. 

 

Buttons 

Buttons are a household item to a website or any other digital application. Active, hover, focused, and visited all have a time and place to be used but gives the crucial user feedback. This relays the message "Yes I am working", "I am clickable", "You've already clicked on me", or "I am already Selected." Communciating these messages can stop the user from possibly thinking "this button does not work" and make the mistake of re-clicking.

 

by Colin Garven

 

by Luka

 

Input Fields

Input fields are seen in instances where a form is in use. Places like siging in to facebook, search bars, or purchasing an item amazon. These fields can hold a handful interaction changes. Text can be altered to indicate placeholder from filled in data. Outlines or background changes can state if element is selected. Adding in icons or color can indicate required, optional fields, or even mistakes. Filling out a form should be clear and visually legible at a glance.

 

by Hayden Bleasel

 

by Peter Finlan

 

Images 

Images are the most important content on a site because it is a visual piece of marketing. They tell your story and relay messages to your users before any text gets read. However, images are a common interactive element. There are all sorts of neat css tricks that can be applied to show off that "Hey, you can click me." The basics would include transitioning in extra content, or giving the element a shield. These work perfectly fine but if you want to get fancy css3 filter or animation; it can spice up a link from simple to dazzling. 

 

by Max Di Capua

 

by Michael Auer for Sigstr

 

by Erika Henell for Agigen

 

Menus 

In majority of cases interactions always tell that some form of navigation is going to take place. Menus play a key role on any site and should work in most cases just like a button.  Travelling via mega menu or a dropdown can accommodate large numbers of page including sometimes three tiers of content. Menus can be tricky for introductory actions. Every user will have a different preference but flyout, on click, or full page are new methods seen. Full page menus often hit two birds with one stone accommodating not only desktop but also mobile.

 

by Julien Renvoye for Mixpanel

 

by Eric Van Holtz for Parliament

 

Asking users to adopt new behaviors or even modify their existing behaviors is very, very hard.  

- Khoi Vin, Principal designer at Adobe

 

Communcating through interactions in some cases is not enough. Users groups can range from diverse traits and backgrounds that change how they might deal with technology. Or can already be use to past functions. Some are not techincally inclined to pick up cues on how things are suppose to work. However, designs can educate audiences. Guiding them to "scroll", "swipe", "select", "drag" or any other action.

 

Behaviour of digital interactions are constantly changing. Between operating systems, devices, applications, and browsers there is sadly gaps of capability. Not to mention when it gets down to accessibility. Adapting to these types of problems and having the solutions truly makes a great design.

"Above the Fold" No More?
Taking Your Web Analytics to the Next Level
The Importance of Photography