The Broads: Interface Animation Effects

The Project

create a minimum of 3 user interface examples, employing any technique or platform as long as you can justify its relevance to the Water Mills and Marshes project. You should seek to take an approach that demonstrates creative risk-taking rather than relying on tried and tested methods.


Why are animations used in interfaces?

Animations are best used when influencing interfaces from the functionality aspect. They bring digital experiences to life. Designs are reinforced and have very clear and logical purposes including:

  • Reduce cognitive load
  • Prevent change blindness
  • Establish better recall in spatial relationships

In a human-centered design approach, where the user is the prime focus, a user interface needs to be intuitive, responsive, and human. Functional animation helps you achieve these goals.

Interaction design provides feedback. Feedback makes you feel like you’re interacting with real elements on the screen and demonstrates the result of this interaction.

UI elements such as buttons and controls should appear tangible, even though they are behind a layer. Visual and motion cues can bridge this gap by acknowledging input immediately and animating in ways that look and feel like direct manipulation.

Visual input is likewise useful when you have to advise viewers about the aftereffects of a task. Cases in which tasks aren’t done effectively, practical movement gives data about the issue in a quick and simple way. For instance, a shake activity can be utilized when a wrong secret phrase is entered. It’s anything but difficult to perceive any reason why the shake is a genuinely general signal to convey “no,” since a straightforward head shake is a manner by which individuals offer input to one another.

Animations serve many different purposes and can be used to utilize certain contexts, an example of this is attention taking CTA.

or even a new email in the inbox.

Branding has an influence on animations as well. It can be used as a mean of marketing – supporting a company’s brand values or mentioning the key strengths of a product, at the same time make the UX of the brand delightful and memorable.

Examples of this:

UX Timing

Various studies have shown that more than 40% of users expect a webpage or an app to load in 2 seconds or less. If it takes more than 4 seconds, the average user starts getting frustrated. After 8 seconds, they leave. As little as one second worth of delay in your site speed can result in a 7% reduction in customer conversions. Loading time is crucial to the success of your site, app or program and if you can keep the user engaged for those few seconds/milliseconds, even better.

Timing animations in itself contribute significantly to the impressions that you give your viewers. For example, when an animation triggers and when it ends in response to an action performed will really impact your users. If it’s too slow, it may cause a delay to the action that the user wants to perform, if it’s fast it will be overwhelming. By experimenting you will be able to achieve the right speed. It’s something you will be able to tell and feel for yourself as you mess with the timing more, and more.

Functional animations perform different capacities in the interface: they control the client through a procedure, enhance introduction and give criticism on passages. They supplement the connection with little subtleties which enhance ease of use just as being fun and offering passionate intrigue. In that capacity, they are vital for an amazing, intriguing based client experience.

All elements can be animated. Text, icons, and images. For a pleasing overall experience, the timing of all these variables should be precisely organized and thought of. You will have to consider performing on different devices due to hardware capabilities, sizing, etc..

Further Inspiration

Loading & Progress

This concept by Gal Shir shows the process of payment confirmation: while the user is waiting, the progress bar is being filled to make it clear. The animated circles on the screen also create the feeling of the active process.

Progress bar animation by Dimest is based on catchy color contrast and special effects of small particles added to the main part. The counter on the right part of the bar also features the progress percentage.

Navigation

This mobile concept by Minh Pham features the slight animation of the photo that prompts the user it is movable.

Animated micro interactions in the UI design concept by Piotr Kohut: when you hit the ticket, it responds with animation to show you that the button is pushed and the number of tickets changes with the action.

Animated concept by Dmitro Petrenko features the sequence of showing interactive buttons of categories, this way giving the feeling of showing the items one by one instead of overwhelming the user with all the buttons together at once.

Animated icons by the Icons8 team are a good way to quickly catch users attention to the feedback about operations. Also, they can be used as a hover animation at websites to give a prompt to the user what interactions can be done. 

The funny and engaging concept of interactive tab bar design by Prekesh: the profile icon moves right or left as if it were looking at the icon the user is pressing.

Scroll Animations

Website scroll animation by Nathan Riley creates the effect of layers interaction making the page look integral and aesthetic.

In this concept by Tubik, mobile horizontal scroll in the app gallery makes the feeling of asynchronous movement of the rows.

Web UI animation by Radesign where the photos aren’t shown at full immediately but gradually open with the scroll.

Greensock For Animation

In the book SVG animations : from common UX implementations to complex responsive animationI have read the chapter particularly focusing on using Greensock for animations and some of the work that the author has authored on codepen. I was very happy to see the author mentioning Greensock before reading the book I experimented and played with Greensock at the following webpage:

https://mindui.co/demo/

I am not a Javascript professional, however, the author has said you don’t need to be a Javascript master in order to understand and utilize Greensock for animations effectively “Even if you’re more comfortable with CSS, you can still master GreenSock. You don’t necessarily need to know everything about JavaScript to use it for animation.”

Reading that statement made me a lot more confident because I always knew that Javascript and I cannot be very good friends and connected since my expertise with JS is not as high as I would like it to be. However, when it comes to using for animations I always found a way and understood how to use JS.

Here is some work showing what you can do with Greensock:

Oranohttps://www.orano.group/experience/innovation/en

 

Robin Payot: http://www.robinpayot.com/

 

DiscoverLexushttps://discoverlexus.com/

 

And many more examples at https://greensock.com/examples-showcases

Clearly, GreenStock is a powerful source/library to use for animations and in the future later in this project, the Broads project specifically phase 2 I will be utilizing this library even further than what I initially did. The potential of this library is beyond comprehension and the digital experiences you can produce with this product are outstanding.


Animation Building & Exploring: The Broads Project

These interfaces are directly related to the broads project due to basing some of the design decisions based on the research that has been conducted as linked in the reference below.

Referencehttps://ameeralashhab.nuacomputerscience.co.uk/2019/01/17/the-broads/

Interface 1: The Welcoming of the UI

Made with Adobe Xd, Sketch, & Principle

This prototype is a demonstration and a creative exploration on potentially how the application could work. The goal here is to perform risk-taking in animations. Let me take you through the process of how I came up with this concept. From ideation to wireframing, and to finally the animation.

The Idea, Stage 1

In my mind I initially thought of utilizing the locations that we have visited to create this animation, however, I thought to myself that’s rather too traditional, meaning that is too generic and I see it as a common approach. Many people who aim to create interfaces for specific purposes tend to use imagery that the app will be based on.

This is something that I thought I wanted to explore, but I came to realize that why should I be the same as others, why can’t I do things my own way that I believe matches the project’s guidelines and what needs to be done. I thought there was nothing stopping me, and in the end, this is not a final product, and therefore there is no limitation on how much I can explore and would like to do.

So I have begun by constructing wireframes on how I would like to make the app look, let’s begin with screen 1:

Image: This is a sketch/wireframing image of a few screens mentioned in the previous post

Digital wireframes made using Sketch for mac

Screen 1:

Simple and clean layout, despite this being just a wireframe I also wanted to take the opportunity to use different fonts for the final version. ‘The Broads’ is acting as a title for the app, while the welcoming segment is meant to encourage friendly and welcoming content.

Next comes the enter button, this button I avoided making it look like a regular button with a square but instead used 2 straight lines to bring the eyes of the users to it.  Of course, this button allows users to explore the app further and see the content.

Finally comes the indicator/progress at the bottom. This is meant to show users which part of the app they are in, or rather which pages and how many pages there are of the app. This is across all screens.

Screen 2:

For the 2nd screen, which was the screen to select a theme I decided to keep it simple and base it off my previous research of the wireframes that were done and shown to our viewers at the location we have visited, which is Beccles. They liked the circle design very much along with the swiping interaction.

In my mind initially before speaking to the users, I thought that they may find interactions overwhelming when instead they actually like this kind of things. I do believe I recall remembering that

Under the circles is the name of the option, and just behind the name of the option is a low opacity text that says “Explore”, which suggests to users that that is what they should do. It’s visually appealing and looks quite nice from my perspective on the screen.

Then a counter below that is being shown to let users know how many options there are, and if they swipe, then the number will update.

An alternative approach, 

 

 

 

 

 

 

 

 

 

 

This is a 2nd approach that I explored and I did not personally like it. This also includes the users that have tested my ideas. One has said she likes this idea but prefers the first concept as it’s more interactive and they do enjoy swiping.

Screen 3:

This is the screen for the wildlife theme, where users can explore and learn more about the animals at the broads. This includes foxes, birds, insects, and so on. Using swiping users will be able to select and explore what they are interested in.

I’ve made these rectangles with a small amount of radius for the purpose of making them look like cards. Attempting circles as well, the result didn’t work out and looked rather unappealing, this is because it would look the same previous screen, and this is not I wanted.

I wanted to make the visuals of each screen, including presentation and structure different and unique in some way one or another.

Screen 4:

This is the information based screen that comes up once users have selected an animal that they want to learn about more. They will find out the speed, diet, colors, and the location of the animal.

There will then be a paragraph that tells them in short about this animal and perhaps a brief history about them. I kept it nice and simple to allow users to have the ability to comprehend and digest the information they see. I did not want to go to heavily in visuals here.

The Design, Stage 2

As we can see here, the primary color for the first few screens is green, and there’s a reason for this. It is not only visually unique, but also the green color has been studied and proven to have various effects on users. Especially for this particular project. I chose green because landscape, animals, nature, and all together combined these themes can be defined and comprehended well through this color.

Until a user makes a selection in regards to the theme they want to look at, then that’s when each theme will have its own unique color. In this situation, the theme color for animals is blue.

The reason as to why I used green in this context is as follows:

  • Combining green and blue together in a color palette represent nature, including the new growth of the forest and the water. Combining brown and beige with green is often associated with organic or recycled materials.
  • Green is a restful color with some of the same calming attributes of blue. Like the color blue, time moves faster in a green room.
  • Green is the color of nature. It symbolizes growth, harmony, freshness, and fertility. Green has strong emotional correspondence with safety. Dark green is also commonly associated with money.

As for blue, I simply thought it was a rather effective color to use and it compliments the green very well, despite the meaningfulness of the blue.

The Animation, Stage 3

My ideas for the animation were plenty, from evolving and moving shapes to think about things minimalistically. However, as the project brief has said, I am required to perform creative risk and this is what I believe I have done here.

Each screen has an intro animation (things coming in) and when you select or make a decision on what to do, then also an outro takes place. Till today I have not seen the implementation of this and there could be a number of reasons such as:

  • Slows down interaction
  • Users will take longer to get to where they want to
  • boringness

However, in this situation, I wanted to make the interaction in between have a cool circle effect that explores in size. I thought this makes things interesting and demonstrates the creative risk to a certain extent. I also do believe as a Designer myself, that I need to do things differently and explore on my own. So I decided to do that.

Elements also fade in and appear in terms of importance in the form of a hierarchy. As research has demonstrated that with UI animation you can control what your users see first and what they see last, this way you can create your own system of hierarchy as to what you believe is important to the user first.

Cultural Heritage/People Theme

This concept demonstrates the animation for what happens when users select the cultural heritage theme. Allowing the fundamental understanding and exploration of the culture of a location specified in the broads project.

The themes color is black to demonstrate the importance of understanding. I do believe that the black color makes people more serious and so I thought this would be the best color to use in this case.

Screens:

 

 

 

 

 

 

 

 

 

 

 

 

This is a very simple design, yet engaging due to the timeline layout. In the top-left corner, a picture has been placed to emphasize the fact that the user has selected the cultural heritage theme. It’s visually appealing and it stands out. It’s also the core of the timeline visual style because the arrows form from there and then from the next screen it ends.

I designed these screens this way because the implementation of animations requires creativity, and creativity cannot be demonstrated if I just display the information statically without any movement what’s so ever, particularly for this theme because otherwise, it would be boring.

The time-line style is engaging because it allows me to also perform information control, in other words, what appears first, in such an order to create events that have happened from time to time for a certain culture. The title of the time appears first and then the description.

The circles that are animated and pop in are purely for visual enhancement and interaction. Which I do believe is a great addition because it really does make a difference rather than having information animated alone.

Landscape Theme

This is the landscape theme, this is where when users decide to explore landscapes. I’ve done a simple, yet clean animation that is also fun and interesting.

Through this design, I was thinking of how I can display options in a creative and a different way rather than using circles and ordinary squares. So I decided I could give the options an angle to make the UI visually interesting.

The transition/screen animation involves elements disappearing and then the option they click on increases in size. The description of the landscape then comes in with a nice clean revealing animation, while other key elements of the screen have a simple fade in.

I do believe I have made something that is worth showing and I am quite happy with what I produced because this project has put me out of my comfort zone and has allowed me to explore and understand animations more. Not only understand, but truly perceive the purpose and comprehend that animations are not just for visual purposes, but also serve organization and order.

Conclusion

This project was educating, enlighting, and insightful. Although this is a small project of just 100 hours, it is still directly related to the Broads Project and I do feel the work I have done so far has ideas that will fuel the Broads project from an open view. To be honest this is the first project that has made me feel as if I’m a real, real interaction designer because I was given the chance to explore my field in a deeper form despite it being only 100 hours.

I personally believe that user interface animation is not just making things look interactive and animating elements. It is a way of communicating with your viewers efficiently using Visual hierarchy and basic design principles that also take themselves to the advanced levels.

I have used multiple design software such as Adobe experience design, Adobe Photoshop, sketch, and principle. Through this project, I have connected and utilized all these software to produce my outputs using the tools provided efficiently.

I have also been challenged with time management and quality control due to the amount of work that I have to juggle at this moment. It is not only the Broads Project it is also the smaller projects that I had to work with along with keeping my blog updated. This also includes freelance work and the more I work the more I realize the importance of my role in the real world, as in the industry.

Freelance work has also contributed a lot to the work produced in this project. I think it’s important to mention this, does freelance work does not only contribute financially, but also to your expertise, knowledge, skill, and time.

Currently, I am facing challenges with time management and quality control due to the amount of work that I have to juggle at this moment. It is not only the Broads Project it is also the smaller projects that I had to work with along with keeping my blog updated. This also includes freelance work and the more I work the more I realize the importance of my role in the real world, as in the industry.

Freelance work has also contributed a lot to the work produced in this project. I think it’s important to mention this, does freelance work does not only contribute financially, but also to your expertise, knowledge, skill, and time.

It is also important to mention that time management is a crucial skill to have during this year because I do recognize the difficulties that I am going through right now due to the amount of work I have to juggle. It is meant to be challenging, it is meant to be difficult because this is simply part of the whole educational experience. It’s projects like this that prepare me to perform as an interaction designer in the real world.