Category: Design

Animation in UI and UX

 

UI stands for user interface and it is anything that the user interacts with. UX stands for user experience and it the overall experience the users have with a product (Preece, Rogers, & Sharp, 2014). UI would be the visual, auditory, and kinesthetic elements of a product, while the UX would be the journey a user has with the product, that is how it is used, what it is used for, and how it makes the customer feel.

An example of great UI is the iPhone’s ever-evolving iOS. The UI of the screen (visual), Siri (audio), and gestures (kinesthetic) is very intuitive and creates a UX that makes it seamless to do multiple activities. For example, want to listen to music or have a question answered? Just say “Hey Siri…” and add a command.  Want to pull up a calculator or take a photo? It literally takes one swipe and a tap to activate these apps, even when the screen is locked.

Apple has an official developer’s website dedicated to UI called Human Interface Guidelines (n.d). On the site they emphasize, three primary themes:

Screen Shot 2018-05-11 at 8.57.09 AM

Apple has made it easy for their users to purchase music and apps (just ask Siri), and with their biometric technology, one no longer needs to enter long passcodes. These attribute to Apple’s bottom line as it creates fast quick purchases, minimizing the time to second guess a purchase. 

So how do UI and UX relate to animation? Simple it enhances the UX by matching animation elements with UI commands. For example, just ask Siri a question and an animation will pop up:

Siri_5067f7768c557c34ff93b1de25963e12-xl

This helps the user to know that the command was activitated and it also allows the app to load in the background.

Developers have used animation to minimize wait times, specifically to loading, downloading, or installing (Frost, 2016).  My animation can be used on an app as the app begins to download and install updates. It also be used as an animation that users watch while the app begins to load on a device. It can also be used as on a websites. Instead of watching a boring loading screen (while all the images are loading or the site is connecting to a server, or updating a shopping cart , users can watch a short animation. The animation can also help deliver and reinforce my brand image to my clients.

When I think about how animation can minimize load times I think about Resident Evil for the Playstation. This was a great design choice as it added to the effect of the eeriness and scare of the game along with masking the load time that was happening in the background. Could you imagine Resident Evil without these animations? 

References:

Frost, A. (2016,  January 28). How to make your users enjoy waiting. Retrieved from https://www.sitepoint.com/make-users-enjoy-waiting/

“Human Interface Guidelines.” (n.d). Retrieved from https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

Preece, J., Rogers, Y., & Sharp, H. (2015). Interaction Design (4th ed.)

“Human Interface Guidelines.” (n.d). Retrieved from https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

 

What is an animatic?


An animatic is a collection of storyboards placed together in a sequence, on a timeline, using a movie editing software. When placing the storyboard on a timeline, we can make each board shorter or longer to see how the timing works for the animation (Plursight Creative, 2014). These timed storyboards can also be timed to the music or dialog. The purpose of this is to view one’s entire animation and make any needed changes more quickly or easily and much less expensively. 

Animatics is a preproduction tool that is actually both used in film and animation (Chew, 2018). Its helpful in creating because the elements that are hard to grasp on a storyboard are the timings and audio involved in the final production. An animatic can precisely communicate how long each shot is and can also communicate when an action happens in relation to camera moves or dialogue. 

One can also create more complex animatics where there are elements separated from the storyboard so that they [elements] can move independently of the background (Plusight Creative, 2014). For example, there can be two elements in on animatic shot, the background and foreground. A ball in one shot [foreground] can move across the screen to show which direction and it moves. The complexity of animatics depends on much detail one wants to add, the more detail, the more complex, but the better it will communicate on what the final product should look like.

In nutshell, an animatic is an animated storyboard used to determine the timing of each shot with key pieces such as sound effects, dialogue, and music added to give a good representation of what the final product should be. Animatics help bridge this gap between post-production and the final production. The next time one is working with storyboards, think about the working out the timing with an animatic.

References: 

Plursight Creative, (2014, February 22). CG101: What is an animatic? [Video file]. Retrieved from https://youtu.be/3sE5ox9kkUg.

Chew J. (2018, January 17). Learn how animatic is used in film and animation. Retrieved from https://www.lifewire.com/what-is-an-animatic-4058250.

Best Practices in Mobile Website Design

Researching the web I found this best practices that kept reoccurring:

Web content should be focused and concise. Each page should have just one central focus so that the user does not get overwhelmed or confused. Having too much information on your page could create chaos especially on a smaller screen (Jain, 2015).

The layout should be flexible and fluid to ensure that the site displays well on different screen resolutions. A best practice would be main content should be centered and to avoid multiple sections that would make it hard to translate in mobile (Girard, 2015).

Having a fixed and consistent navigation menu is crucial so that users can easily navigate through the site (Jain, 2015).

Designers should practice thoughtful Reduction- Keeping images and other dynamic content minimal (Jain, 2015; Girard, 2015). Speed is an important part of designing for mobile, anything that reduces the slow down is beneficial to the user. It best to keep what’s important and possibly delete what is questionable, and definitely delete the insignificant.

In observing my website, I really don’t have much I would change, as when I was creating the website, I was designing with mobile in mind. Here are some things I could improve on:

  1. I would reduce the number of photos, maybe create a photo album to showcase services.
  2. Each page on my site has a central focus, I need to remember to only add important elements and remove insignificant ones to create for a faster and friendlier user experience.
  3. Like the above tip, do not bombard pages with too much info. Keep the site simple and lite.
  4. My current pages are split in half, one half is information the other half images, maybe just keep the half with the info and send the images to a photo album
  5. I should design the site so that its more stacked vertical than horizontal. Since most mobile devices are viewed from the horizontal position, this would make sense.

Reference:

Jain, R. (2015, April 8). 7 Best practices for designing a mobile user experience. Retrieved March 12, 2017, from https://www.sitepoint.com/7-best-practices-designing-mobile-user-experience/

Girard, J. (2015, October 19). 10 rules of best practice for responsive design. Retrieved March 12, 2017, from https://thenextweb.com/dd/2015/10/19/10-rules-of-best-practice-for-responsive-design/#.tnw_6fdx7j0J

 

What is Web Accessibility?

By Dru Macasieb (March 1, 2017)

Web accessibility means allowing everyone the opportunity to access and utilize digital resources on the web. This compromises of creating hardware, software, and web content that can assist differently abled people. We are all not created equal therefore, some people have difficulty using the web due to differences in visual, auditory, physical, speech, cognitive and neurological abilities (Katsanos, Tselios, Tsakoumis, and Avouris, 2012).

A web page that is accessible, is one that benefits a spectrum of differently abled people. From users and developers to people with diverse needs and preferences, web accessibility empowers individuals and creates an environment of inclusiveness.

What is the importance of creating a website that follows accessibility guidelines?

Having accessibility guidelines is important because it allows for universal access to all, thus creating the same opportunities for everyone. Two key guidelines to follow are:

  1. Web design should be flexible and adaptable
  2. Accessible through different mediums such as mobile devices or assistive technologies

What is the difference between a website that is accessible and one that is not?

A website that is accessible recognizes the current trends and technology, as well as design, that allows for maximum participation, and makes diligent efforts to provide reasonable accommodation for all. A website that is not accessible ignores the fact that many people are differently abled, thus does not provide flexible and adaptable content.

References:

Katsanos, C., Tselios, N., Tsakoumis, A., & Avouris, N. (2012). Learning about web accessibility: A project-based tool-mediated approach. Education and Information Technologies, 17(1), 79-94. doi:http://dx.doi.org/10.1007/s10639-010-9145-5

%d bloggers like this: