1. Introduction to Research Project
Enhancing user engagement is crucial in design, particularly in the digital realm where attention spans are fleeting. Motion graphics combine a diverse range of graphical elements such as text, graphics and more (Geng, 2016) and have become a valuable tool in recent years to enhance user engagement, particularly within online platforms and websites. By dynamically moving around the page, motion graphics not only enhance comprehension but also provide user feedback to actions such as scrolling or hovering, elevating the overall engagement.
After conducting thorough secondary research in the first semester of this project with my proposal, it is evident that motion graphics have a large impact on capturing and retaining user attention in a variety of fields. Studies have demonstrated their efficiency in supporting visual appeal (Lai et al., 2019), and aiding content comprehension (Hanif, 2020). For example, eye-tracking studies such as (Cheung, Hong, and Thong, 2017), found that users were more inclined to look at dynamic visuals over static ones, suggesting the heightened interest and engagement motion graphics welcome. However, insights regarding the efficiency of motion design within digital portfolios remains limited. To address this gap, my approach involves practically applying all of what I have learned from my comprehensive secondary research, designing two websites- one static, without animation, and another enriched with motion graphics, both featuring identical content. Subsequently, two thorough surveys accompany this project by comparing user responses to both versions and assessing further factors such as their attention, engagement, interaction preferences and more. By uniting both of these research approaches accompanied with a practical project, actionable insights for designers and other creatives will emerge to understand the importance of utilising different forms of media, particularly animation, to showcase their work effectively to potential clients and employers (Figure 1.1).
OAn additional layer to take into consideration is addressing the integration of United Nations Sustainability Development Goal 4 - Quality Education (Figure 1.2). This goal advocates for universal access to quality education, regardless of differences. Therefore, I intend to investigate how motion graphics and animation can enhance comprehension, aligning with existing literature, such as (Hanif, 2020)’s research that indicates motion graphic media is more effective in education and enhances students ability to comprehend materials. To achieve this, I will integrate this exploration into my survey by asking respondents on their preference for understanding content- whether through static images or video options - and act on their responses in the website’s design
For a more comprehensive overview of my project’s development, brief, and the underlying thought processes, see my Milanote board here (Figure 1.3).
2. Time Management and Considerations
Before beginning project development and initiating primary research, meticulous planning was essential to ensure effective time management and mitigate potential risks over the 12-week period in this semester. To achieve this, I devised a tactile to-do list categorised into project milestones (Figure 2.1). For instance, during the planning phase, tasks involved time management planning and risk assessments. This approach not only provided a clear view of all tasks to be accomplished within the project’s timeframe, but also facilitated quick recognition of segments that would require more time than others, influencing the creation of a detailed Gantt chart (Figure 2.2). Recognising that website development would be particularly time consuming due to tasks such as designing and prototyping, I allocated a substantial portion of three weeks to this phase on the Gantt chart. Alternatively, I decided to allocate less time on the Gantt chart to segments like brand design.
In addition to effective time management, identifying and addressing potential risks is crucial for smooth project development and minimising setbacks. One significant risk is unexpected technical issues with Figma, the chosen prototyping platform for this project. To mitigate this risk, I will need to regularly save project files locally and consider diverting to prototyping platforms such as Adobe XD. Another crucial risk centres on the possibility of receiving insufficient survey responses, limiting the insights I hope to gain into motion graphics’ impact on digital portfolios. To address this, I aim to diversify survey distribution methods, such as through a variety of social media platforms, and extend the survey duration if needed.
3. Primary Research Survey (1)
To ensure a thorough investigation into animation on online applications and provide substantial additional insights, methodology was employed which consisted of two primary surveys designed to investigate user perceptions and preferences regarding animation on websites. The first survey aimed to gather data on preferred types of animation, opinions on benefits and drawbacks, and personal experiences with animated websites.
Findings revealed that most respondents spend under an hour daily on websites, emphasising the need for attention-grabbing motion elements. While desktop/laptop browsing was dominant, a quarter favoured mobile devices, suggesting a need for mobile-friendly designs (Figure 3.1). Regarding animation preferences, respondents showed a notable preference for subtle animations, aligning with research from (Cheung, Hong, and Thong, 2017) on subtle animations and prolonged engagement (Figure 3.2). Further research into the primary purpose of animation revealed a majority of respondents believing the primary purpose of animation on websites should be to enhance user feedback, emphasising the importance of incorporating animated interactions into website designs (Figure 3.3). Interestingly, while some preferred websites without animation, no respondents thought a website should have no animation at all (Figure 3.4). Instead, a balanced mix of motion and static graphics was favored to prevent distractions, echoing concerns raised by (Sundar and Kalyanaraman, 2004). Individuals who say they prefer no animations on websites raised concerns over motion content slowing their devices (Figure 3.5), highlighting the necessity for lightweight file formats, aligning with Sustainable Development Goal 12 on responsible consumption and production.
With a more thorough insight into motion design and online applications from these survey responses, I began developing the website with a dynamic approach to critically analyse the consistency of these responses by comparing the reception of a static digital portfolio against an animated counterpart.
4. Sketches and Wireframes
Prior to commencing the project, I decided to define the website’s style. To do so, I seeked inspiration to create a moodboard of things I was drawn to, as I wanted the website to reflect my personality and preferred design style (Figure 4.1).
When developing the website’s sketches and wireframes (Figure 4.2-7), I integrated insights from both my primary research survey and extensive literature review conducted during the first semester. I strategically placed areas for motion graphics and animations on the website pages, drawing inspiration from Lai et al. (2009) to prioritise minimal animations that enhance visual appeal without overshadowing content. Research by (Cheung, Hong, and Thong, 2017) and responses from my primary research support this approach, highlighting how subtle animations can enrich specific elements and prolong user engagement.
Furthermore, considering findings from Cheung, Hong and Thong’s eye-tracking study and my own survey, which indicated that animations attract user attention more effectively than static content, I carefully wireframed areas for animations to guide user interaction without distracting from important textual information. Leveraging the educational benefits of motion and video content identified in current literature (Hanif, 2020), (Santoso, Ghassany, and Putri, 2021), I have also considered incorporating video content on project pages. This not only enables visitors to understand the thoughtful decisions behind a designer’s creative choices, but also aligns with the broader goal of understanding how we can enhance education experiences with motion design, contributing to Sustainable Development Goal 4.
5. Project Development
For this project, I used the prototyping software ‘Figma’, utilising the Relume Figma kit(fig 5.1) to streamline the creation of website elements and components. A key decision was to infuse subtle animations across the entire website to reinforce visual identity and identify if findings from my survey or scholars in current literature align with this project (Fig 5.2).
Given the project’s emphasis on animation and the goal to understand its advantages, I opted to prototype the design with relevant GIFs and motion design elements. This enabled users to interactively explore and experience the animations firsthand. In the prototype, all buttons and links were interconnected, mimicking the functionality of a live website and guiding users seamlessly through pages (Fig 5.2).
To dive into the benefits of user interactions and see if discussion in current literature was reflected in this project also, I integrated hover effects over images and buttons (Fig 5.3). This involved creating components with distinct hover variants, linked together with Figma’s prototyping tools. By using ‘smart animate’, transitions between the two states appeared smoothly, aiming to enhance user satisfaction with a more fluid browsing experience.
To view the finished prototype of this website and explore the design (Fig 5.4), see the Figma file here.
6. Animated Header Development
For the homepage, I’ve chosen to experiment with an animated header. While scholars like (Sundar and Kalyanaramam, 2004) have argued against animated banners, claiming distractions and negative associations, the landscape seems to have evolved since then. (Fattahi, Shir, and Asadollahi, 2014) have observed a shift in trends, noting increased adoption of animated banners and motion design by companies in online advertising. I’m intrigued to explore how this shift might impact this project and animated banners as a whole in the current online realm.
Drawing on (Geng, 2016)’s insights, narrative and emotion play a significant role in creating a successful animation. Therefore, I storyboarded an inspiring journey from a rocket on a designer’s desk that would embark on an adventure into space to symbolise the designer’s creative journey (Figure 6.1). Similarly, considering insights from (Azahari et al., 2020) who emphasises the significance of colour choices in animation, I opted for colours from the brand guidelines to ensure visual coherence throughout the website while maintaining attention-grabbing colours (Figure 6.2).
7. Primary Research Survey (2)
The second survey for my primary research employed a comparative approach using the website I had created over the course of this project, using a static version and an animated version. Participants were tasked with comparing both versions and providing their preferences between the two, contributing to a more comprehensive understanding of animation and user experiences.
A noteworthy discovery from the survey was that 75% of respondents favoured interactive elements over static links and cards, indicating a strong preference for dynamic browsing experiences (Figure 7.1). This emphasises the necessity of integrating interactive elements like button hovers and scrolling animations into digital portfolios to enhance user engagement, reflecting findings from the initial survey of this project.
Despite criticisms of animated headers expressed by (Sundar and Kalyanaraman, 2004), a surprising 72% of respondents favoured the animated header over its static counterpart (Figure 7.2). This suggests a shift in user attitudes towards animated banners, possibly influenced by evolving trends noted by (Fattahi, Shir, and Asadollahi, 2014) and (Hong, Thong and Tam, 2007). Moreover, the success of animated headers on creative websites instead of e-commerce websites, where users may not feel pressured to make purchases, could contribute to this positive reception.
Furthermore, in line with findings from (Höffler and Leutner, 2007), (Santoso, Ghassany and Putri, 2021), (Hanif, 2020), 66% of respondents found the video process more comprehensible than the static process (Figure 7.3). This preference for video content suggests a need for educators to consider incorporating animations and video content into educational materials to improve clarity and engagement. However, one respondent argued that although still clearer than its static counterpart, the video process could still benefit from additional emphasis on certain decisions (Figure 7.4). Therefore, this is also worth considering to improve educational video content and further contribute to a better quality education (SDG 4).
8. Findings and Conclusions
In conclusion, this project has provided valuable insights into the role of motion graphics in shaping user interactions and engagement within digital portfolios. By combining comprehensive secondary research with practical experimentation in primary surveys, it is clear that motion graphics can be used to enhance user experiences in online portfolios in addition to other online applications.
The findings highlight a clear preference for subtle animations and interactive elements among users, challenging earlier criticisms of animated headers and underscoring the importance of dynamic elements in digital design. Moreover, the effectiveness of video content in improving comprehension, particularly in educational contexts to communicate information more clearly, aligns with the broader goal of fostering quality education as outlined in Sustainable Development Goal 4 - ‘Quality Education’.
Looking ahead, there are several routes for further exploration and refinement. Developing this project fully into a live website could help explore a clearer understanding on how to combat video content slowing down the devices of some users with file types and smaller file sizes, with avenues such as utilising Lottiefiles or smaller GIFs under 1mb. Fine-tuning educational video content based on user feedback could optimise its effectiveness as a learning tool, while also unlocking further opportunities going forward for engagement in a variety of applications.
While this project’s findings align with existing research on motion design in online applications, the online landscape is always evolving, with new tools constantly emerging that could reshape perception’s of animation’s role in user experiences. Presently, animation stands as a pivotal tool for enhancing user interactions, yet its significance may shift alongside evolving technology and trends. By continuing our exploration of motion graphics’ transformative potential in user experiences, we can not only enrich interactions across digital platforms but also contribute to ongoing advancements in design and education.
References // Bibliography // Appendices // List of Figures
Word Count: 2240