Categories
Uncategorized

Lab 10 Research: UI/UX Animation Examples

  1. https://dribbble.com/shots/13988727-Furniture-App

This first animation comes from a dribbble.com user, Dannniel, who made a concept for furniture shopping. The animation feature occurs when a user chooses a piece of furniture, and it pops up in a display box at the top of the screen. The really useful function here, though, is when a user wants to add more furniture; the animation creates a space the user designs based on all the furniture they want to mix and match. In the prototype, it shows a user picking a carpet, coffee table, bookshelf, and more to see what all of the furniture would look like together in the virtual space. This animation is practical because it could help users to see what pieces of furniture go well together before even adding an item to their cart.

2. https://dribbble.com/shots/8584111-Health-Check

The next UI design I found from Cosmin Capitanu on dribbble.com as well, and this design features an interface for a “Health Check” app concept. The appeal in this use of animation comes with its ease of moving from section to section, i.e. “Crafting Status” to “Health + Fitness,” as it takes great account of the space of the screen. The 3D box graphs show levels of subcategories the user can track, and when moving from one section to another, the graph simply adjusts its level to the selected section and changes color, but the overall page stays consistent in a way that makes it really easy for users to understand.

3. http://tympanus.net/codrops/2015/09/23/elastic-progress/

The final example of user experience animation I researched was created by a dribbble.com user called xjw, which is a loading screen. I think that this animation contributes less to the actual user interface and more to the user’s comfort or overall enjoyment of a rather mundane part of using any application: the loading screen. The art behind the screen is interesting. The designer took the classic “loading bar” and made a text bubble slide across the bar like a tightrope while showing the progress of the load. The animation may be useful to appease a user’s irritability when waiting for something to load.