Chung, Bill. Everything You Need to Know About Skeleton Screens. UX Collective, 2018.

Everything You Need to Know About Skeleton Screens

Skeleton screens are partially loaded web pages. They use placeholders, such as boxes, to show where content will be once loaded. They can decrease the perceived loading wait time by offering a transition from not loaded to loaded. Facebook, LinkedIn, Google Drive and Youtube use them. 

Skeleton Screens to Decrease Perceived Wait Time

Kim, H., Kim, M., Kim, J., & Park, H. (2014). The Effects of Load Time, Contents, Loading Screen, and Animation Type on User Satisfaction with the Load Speed of Mobile Apps : Archives of Design Research, 27 (2), 107-119.

The Effects of Load Time, Contents, Loading Screen, and Animation Type on User Satisfaction with the Load Speed of Mobile Apps

Sequential and continuous changes of the screen can make users more willing to endure a longer waiting time. Sequential loading animation also shows high satisfaction regardless of the load time. 

Continually Changing Loading Screens Result in Higher User Satisfaction

Jung, Hanna. 32 Creative Loading Animations That Are Worth The Wait. Digital Synopsis

32 Creative Loading Animations That Are Worth The Wait

47% of users expect a webpage or an app to load in 2 seconds or less. After 4 seconds, the average user starts getting frustrated and after 8 seconds, they leave. In fact, a one second delay in your site speed can result in a 7% reduction in customer conversions.

User Loading Performance Expectations

Redesign of the loading screen to improve user satisfaction by:
1. Decreasing perceived wait time
2. Making users more willing to endure longer wait times

University of Michigan - Ann Arbor

- Background design
- Lightmode vs. Darkmode
- Node action icons
- Logo
- Tooltips
- Homepage
- User Profile Page
- Practice Tool
- Chat sidebar

1Cademy UI General Components

The background of the map can be a little distracting. Some possible ways to fix this would be to reduce emphasis on it through blending mode, blur, etc. or altogether change it to something less busy, such as a solid color, gradient, etc.

Background Design

Logo design

Includes possible alternatives for the tooltips that pop up when you hover on an icon, with the intention of reducing their word count to make them easier/faster to read.

Tooltip Alternatives

These are our initial lightmode designs. There are four variations that play with the lightness of the foreground elements, as well as the background image and it's overlay. 

Lightmode designs

Loading Screen Design

Update 1Cademy website meta title and description to be more useful in search engine results.

Meta Title and Description

Redesign the action icons using Material Design to...
1. More clearly communicate actions
2. Make icon locations more intuitive
3. Better align with the Material Design interface 

1Cademy Node Action Icons Design

These are our designs for the user profile page that is shareable/editable. They contain pinned nodes, trends, all nodes, an about section, and related scholars.

User Profile Page

These are our designs for the sidebar user settings. They contain different button designs and background layouts for the sidebar settings. 

Sidebar User Settings

This records and contains our design on the redesign of chat sidebar.

Chat sidebar

The UI design for the 1Cademy Practice Tool was started in June 2021. The structure for the practice tool is evolving over several iterations and design critiques. Currently the main components of the practice tool are:

- Practice Tool Launch Page
- Question Page
- Expanded Leaderboard
- Question/node feedback       

Learn Before

Related

Learn After