Feedback

What was the most compelling/surprising/interesting/useful concept I learned in CSC318? Why?

  The most useful concepts I learned from this course is the heuristic evaluation. From the heuristic evaluation, I learned a standard to evaluate a website/application. And I could design the graphic user interface of a website/application according to 10 heuristics.

I had a chance to put into practice a concept from the course. Here is my experience.

  In the assignment 2, my partner and I conducted the heuristic evaluation on MarkUs website. During this process, we developed a deeper understanding of what a good user interface should be and how to improve the user experience.

Functional animation in UX design

• What is functional animation

            The functional animation is a technic used by designers to help users to understand the logic behind the user interface. A well-designed functional animation could greatly improve user experience by reducing users' cognitive load. One of the most well-known examples is the loading animation. The loading effect indicates the status of a system. This could provide a positive feedback to users after they requested some resources from the system. This could also reduce the negative emotions raised by the waiting. 

Loading effect example

• What makes a good functional animation?

          1. Responsiveness

          Similar to the criteria of other UI/UX designs, a functional animation is supposed to appear immediately after a user's operation. It is a common feature that people are always looking for feedbacks after an operation to learn the functionality. A good functional animation should satisfy users' desire.

The animation is responding to user's clicking

        2. Correlation

            A functional animation should always closely related to its trigger. For example, if clicking a button in the page could show a menu on the same page, the location of the menu should be around the button. Otherwise, users would be confused about the relation between the button and the menu.

A good example from Google material design

         3. Being natural

             A functional animation should follow the basic physics rules. Designers should consider the gravity and friction in their animations.

A user wanna check the details

       From the gif above, we could see the process of the animation is begin->accelerating->decelerating->stop. This process is natural and predictable.

         4. With purpose

        There should be a proper purpose for using the animation. Designers should avoid using pointless animations. 

User clicks an item in a calendar

           In the above gif, clicking an item in a calendar triggers an animation to show the details of the item. The animation used in this scenario could help users to understand the relation between the item and the popup. 

        5. Fastness

            A well-designed functional animation should avoid making users waiting for the animation finish. A long and tedious animation could greatly reduce user experience.

  Good example                                 Wrong example

References

1. https://www.smashingmagazine.com/2015/05/functional-ux-design-animations/

2. http://mp.weixin.qq.com/s?__biz=MzAwNzc5NjgxMg==&mid=2651802272&idx=1&sn=03e7f232bb0a1e67b0f6d41a521e832f&chksm=80834b83b7f4c2959dc611053d0c8b3d87adce052236ceb2d6d9ac543975a78c3dc461c758e5&mpshare=1&scene=23&srcid=0319b4qeWRtAgtI9vv0XLKEN#rd

3. The gifs are collected from material design.

Case study-WeChat short video recording

  Wechat is a popular instant message app supporting multiple platforms. Several months ago, Wechat group added a short video recording function to its application. Users could record and send a short(several seconds) video to their friends. 

  There were two ways to start recording a short video.

• Pulling down the Moments page, an eye sign appears. Releasing the Moments page, the short video recording panel appears.

The eye sign appears after pulling down the page[1]

• Clicking the Camera icon on the right top corner, then selecting "Use Camera" from the menu.

  However, in the recent update of Wechat application. They removed the pulling down to record short video function because this function broke the heuristic of consistency and standards. Users are used to pulling down to refresh a page. The original design, pulling down to start recording is violating the habit of most people. The stats indicated that more than 90% users are using the second way to record a short video even the second method takes more steps.

  From this example, we could conclude that users prefer the designs that obey their intuition.

References
  1.http://img14.3lian.com/201511/30/7964826d34379b680d22af9dd052a99d.jpg
  2.http://www.3lian.com/edu/2015/11-30/261321.html