Reflection

This week we looked at micro interactions which are small interactions or animations that occur within a data visualisation. They can be used to provide feedback, communicate changes in data, or highlight important information. For example, a micro interaction could be used to highlight a particular data point when a user hovers over it, or to provide a small animation when a user selects a filter. Micro interactions are important in data visualisation design because they can help to create a more engaging and interactive user experience. When used appropriately, micro interactions can help users better understand the data and make more informed decisions based on the information presented.

Overall I feel like I have a good understanding of micro interactions now than before and will definitely be adding them to my dashboard.

Research

I looked at the article "Micro interactions: The Secret of Great App Design" by the Nielsen Norman Group discusses the importance of micro interactions in app design. Micro interactions are small interactions or animations that occur within an app or digital product, such as liking a post on social media or sliding a toggle switch. The article highlights the benefits of using micro interactions, including improving user engagement and providing feedback to users.

The article also provides guidelines for designing effective micro interactions. These include ensuring that the micro interaction is contextually appropriate, providing clear and concise feedback, and designing for emotional appeal. The article emphasises the importance of considering the user's perspective when designing micro interactions, and providing feedback that is meaningful and relevant to the user.

Overall, the article emphasises the importance of micro interactions in app design, and provides guidelines for creating effective micro interactions that enhance the user experience. By following the provided guidelines, designers can create engaging and user-friendly micro interactions that help users accomplish tasks and provide feedback in a meaningful and contextually relevant way.

Dashboard

This week I continued on with my dashboard by completing the travel tab. I created the map in procreate by tracing a screenshot of the map from google.

I also prototyped this to ensure the user can see all information.

I also worked on the finance tab. I decided to use a donut chart to show my spending as it allows the user to quickly and easily see the percentage breakdown of different categories of expenses. With each category being represented by a slice and the size of the slice corresponding to the percentage of the total spending it represents. I also like the idea of showing the total spent displayed in the centre. I decided against showing my spending by day as there were a few days were I spent nothing so the chart would look incorrect as it would only show 3 days out of 7.

Here are the finance screens. I have prototype this so when you hover it shows the individual sections. However I have ran into an issue with glitching with the prototyping on the transport and savings slices. I am unsure on how to solve this problem and hope to improve on this in the future.

Prototype File

https://www.figma.com/proto/qnLguzIXrgxzD7Qi5mr1Hy/Dashboard?page-id=0%3A1&type=design&node-id=1-2&viewport=-79%2C224%2C0.14&scaling=min-zoom&starting-point-node-id=1%3A2