How Gestalt Principles, Data Graphics and Hick’s Law are utilised in the information design of mobile banking apps, to make them intuitive and beneficial for users: A Case Study
Theme and Case Studies
Considering the design principles of information design, this case study aims to understand how Gestalt principles, data graphics and Hick’s law can be used to make mobile banking more intuitive and beneficial for users. In 2017, 22 million people managed their financial current account through their phone and it is predicted that 72% of the UK population will use mobile banking by 2023 (Peachey, 2018). A user’s screen time on an app correlates to the effectiveness of its design (Zichermann and Cunningham, 2011). Therefore, in order for a mobile banking app to be successful, it should incorporate well thought out information design principles.
This case study explores the information design of two mobile banking apps and aims to understand how they utilise specific information design principles to become intuitive and beneficial for users. The first case study is Halifax UK’s mobile banking app, which takes a legacy approach to allow users to manage their money on the move. The second case study is Monzo Bank, which is a mobile-only bank that draws inspiration from other successful modern day mobile apps.
Users are more likely to choose a mobile app that meets their needs over one that meets their wants (Garrett, 2011). The human psychology behind this can be interpreted by Maslow’s Hierarchy of Needs- whereby in order for a human to be satisfied, the most basic of needs must be fulfilled before higher level needs can be satisfied (Evans, 2017). In the context of mobile apps, effective information design falls into the category of basic needs. If the structure of information on an app is poor, it will cause the user to get frustrated (Evans, 2017). On the other hand, usability is a higher order need, so if the information is unreadable, it would not be possible to design an interface that will allow for quick task completion, demonstrating the importance of well thoughout information design (Evans, 2017).
When designing information on a mobile, screen space is finite, so prioritising the most vital principles is important (Schmitz and Kühl, 2005; Jacobson and Wurman, 2006). A study by Nationwide Building Society showed that people were 44% more likely to check their account balance than their work email whilst on the move (Nationwide Building Society, 2018). From this, banking apps are one of the most downloaded apps in the app store but usually provide the poorest experience, demonstrating the need for a change (Molloy et al., 2013).
Design Principles at a Glance
Gestalt principles illustrate the way our brain makes sense of visual information (Weinschenk, 2011). Gestalt principles are everywhere in many visual representations that become deeply ingrained in our brains, such as logos (Koffka, 2014). This is relevant to information design within a digital context because modern day users are becoming more visually inclined and require information to be transmitted with much less cognitive effort (Krug, 2014). According to Gestalt principles, a few laws govern the way we visually group things. Outlined below is a list describing Gestalt principles in the context of mobile banking applications.
- The law of Proximity: When a user perceives a collection of objects, they perceive objects near to each other as associated (Weinschenk, 2011). When designing a mobile banking app with multiple text or graphical elements, placing related elements close to each other will help the users make sense of information faster (Koffka, 2014).
- The law of Similarity: Elements that have visual similarities in the form of colours, shape, orientation or iconography are visually grouped together (Weinschenk, 2011). In the context of mobile banking apps, the law of Similarity will be effective when visualising large amounts of data such as a person’s monthly spending habits. The design could group spending categories such as bills and entertainment to specific colours, to help break down the information more intuitively.
- The law of Continuity: When the user’s eye is guided to move from one element to another (Krug, 2014). Human perception tends to follow continuous lines and unified shapes (Weinschenk, 2011). This is a particularly popular principle already utilised by digital mediums through the use of navigation bars and drop-down menus, which provide an affordance of additional options (Weinschenk, 2011).
- The law of Closure: Users perceive digital objects such as shapes, letters and pictures as being complete, even when they are not (Krug, 2014). In the context of a mobile banking app, the principles can be applied to loading states or money quantity indicators, as the law of Closure can be used to design completion meters and loading bars.
Mobile banking apps must respect their users restricted time (Schmitz and Kühl, 2005). Digital interfaces must provide the maximum amount of information possible with the minimum number of clicks. Data graphics eliminate the cognitive bottleneck involved in information perception (Donalek et al., 2014). Therefore, this can make spending forecasting and personal finance decision making quicker and easier (Rudolph et al., 2009).
- Data visualisation supports information comparison, allowing users to visually see how two or more different data sets stack up to each other (Kirk, 2016). Zero baselines should always be incorporated as it gives more context for comparison (Rendgen and Wiedemann, 2018).
- In order to maintain focus on the quickest path to data visual comprehension, any descriptive text should be kept above or below the graphic (Cairo, 2012). When emphasising a point, only use bold or italic text and do not use them both at the same time (Kirk, 2016).
- Colour is essential in data visualisation and should be used appropriately to prevent distraction and misinterpretation (Cairo, 2012). Adopting the Gestalt law of Similarity, use a single colour to represent the same kind of data (Rendgen and Wiedemann, 2018).
- A colour palette is optimum with no more than six colours in a single layout (Kirk, 2016). However, some colours stand out more than others naturally, giving unnecessary weight to that data, so consideration must be given in the palette choice (Cairo, 2012).
Delivering a good mobile experience requires the designer to identify the functionalities users need most and to make those intuitive to find (Lidwell et al., 2010). Hick’s Law says that the more choices that a user is presented with, the longer it will take for them to reach a decision (Lidwell et al., 2010). Many mobile apps often neglect this law whilst trying to cram too much functionality into an app. There are various methods that utilise Hick’s law, such as Highlighting, which is when a few important options are made to stand out, in order to speed up the engagement times (Lowdermilk, 2013).
Background and analysis: Case Study 1 and 2
Case Study 1 - Halifax UK Mobile App
Founded in 1853, Halifax is a British bank operating as a trading division of Bank of Scotland (Lloyds Banking Group, 2018). The Halifax mobile app includes the ability to view balances and transaction history; view or cancel direct debits; and set up, view or cancel standing orders (Halifax, 2018).
Figure 1: The landing page for the Halifax mobile app (Halifax, 2018)
Gestalt principles have not been utilised effectively throughout the mobile app. As the law of Proximity states, items which are related to each other should stay within close proximity, while the unrelated items should stay further apart (Koffka, 2014).
Figure 2: Recurring payment sections on the Halifax mobile app (Smart Money People, 2017)
As seen in figure 2, within the standing orders sections, various pieces of information seem to be randomly positioned. There is not any obvious association between the contents of each section. One simple amendment would be to put the payee’s name and payee’s payment information together. Furthermore, there is a confusion with the use of font weight. In the top section where it has the payee’s name, ‘John Smith’ and the title ‘next due’, the side-by-side use of boldface would indicate that those pieces of information are associated according to the law of Similarity. Koffka (2014) suggests using white space in these situations, as the contrast guides the user’s eyes towards the intended direction. With this app, white space is wasted in ineffective areas of the screen, such as at the bottom. When used effectively, white space can promote visual hierarchy and information flow (Jacobson and Wurman, 2006).
Figure 3: Display of transaction data on the Halifax mobile app (Halifax, 2018)
More appropriate Gestalt principles have been utilised within the transaction section of the mobile app, as seen in figure 3. Such as the use of white space and line separators to indicate individual transactions, according to the law of Proximity (Koffka, 2014). However, the lack of data visualisation representing the financial transactions will result in poorer user engagement, inadequate information processing and limited interactivity (Kirk, 2016).
It should be possible to see detailed information on anything that serves to improve a users financial experience and health, including cash transactions, budget forecasts and system recommendations (Zhou, 2011). Recommendations may include advice on how to reduce spending in certain categories; status alerts about critical financial situations, such as being overdrawn; and reminders to pay bills (Zhou, 2011). Within the Halifax mobile app, each transaction item is static, incorporating no user interaction.
Figure 4: Navigational menu on the Halifax mobile app (Smart Money People, 2017)
User’s time on any digital platform should never be taken for granted. A study conducted by Microsoft in 2015 confirmed that the average human attention span is 8 seconds when using mobile applications (Microsoft, 2015). Therefore, it is important that the user is presented with the least amount of choices possible, in order for them to reach their goal quickly (Garrett, 2011). Figure 4 shows the navigational menu for the Halifax mobile app. The user is burdened with a long list of options that should be further categorised into a smaller set of options. As seen with many clothing shopping websites or mobile apps, navigational options are regularly split into categories, with a further breakdown of subcategories below. In turn, this reduces the number of choices at a given time into a manageable amount (Garrett, 2011). With the Halifax mobile app, the long navigational list of options found in figure 4 could be converted into three sections with a further three sub-sections in each instead. For example, the the ‘Make a Transaction’, ‘Make a Payment’ and ‘Pay a Contact’ options are all similar functions and could be grouped together as one.
Case Study 2 - Monzo Bank Mobile App
Figure 5: Left: Homepage listing all transactions by day. Right: Information provided per transaction within the Monzo mobile app (Monzo, 2018)
Monzo is a digital and mobile-only bank based in the United Kingdom (Monzo, 2018). Payments made with the Monzo bank cards will trigger real-time push notifications within the app, where historical transactions can also be viewed (Williams-Grut, 2015). The app will automatically categorise each transaction, allow users to freeze the card if lost and view an interactive graphical overview of their spending habits (Martin, 2018). Monzo pioneered money management as part of their user experience design, utilising effective information design principles which in turn allows users to better control their finances.
Gestalt Principles The Monzo app is really easy to navigate. As seen in figure 5 on the left, the homepage lists all transactions by day. Utilising a combination of the law of Continuity and Proximity, information such as the purchase amount and the vendor logo are seamlessly connected (Koffka, 2014). Each transaction can be reviewed in more detail by clicking on it, as seen on the right of figure 5. Each spending category, such as ‘Eating Out’, ‘Bills’, and ‘Entertainment’ have an associated colour. This use of the law of Similarity with colour helps break down the large amounts of data associated with a person’s monthly spending habits (Rudolph et al., 2009). Lastly, the use of the law of Closure can be found in figure 6 below. Human perception visually fills in the missing portion of the green circle, that is used to indicate users monthly spending (Koffka, 2014). This is an effective progress indicator for a bank account’s money quantity, as it informative whilst not introducing too much noise or clutter to the overall interface (Krug, 2014)
Figure 6: Data visualisation infographics within the Monzo mobile app (Finder, 2018)
The ‘Summary’ tab within the Monzo app groups transactions into the categories mentioned in the previous section. The aid of simple data techniques such as line graphs helps users see what they are spending the most on and what to potentially cut down (Rendgen and Wiedemann, 2018). These line graphs enable easy category comparison, letting users visually see how two or more category expenditures stack up against each other (Kirk, 2016). The graphs are also zero baselined, further aiding comparison (Rendgen and Wiedemann, 2018). The infographic supplementary texts such as headers and data highlights are concise, ensuring focus on the quickest path to data visual comprehension (Cairo, 2012). The use of bold text has been used appropriately when highlighting specific pieces of information, such as the date range on the infographic in figure 6 (Kirk, 2016). The colour palette for the graphs is also consistent. Instead of using lots of colours, varying shades are used to give extra weight to certain data where appropriate (Cairo, 2012). Collectively, these methods help prevent overspending on impulse purchases which users may not be aware of when using traditional banking mobile apps (Huang et al., 2015).
Figure 7: Payment section on the Monzo mobile app (Adobe, 2017)
The Monzo app’s navigational menu is categorised into five primary sections- ‘Home’, ‘Summary’, ‘Account’, ‘Payments’ and ‘Help’. Figure 7 demonstrates the ‘Payment’ section active, where further payment related options are present. This approach reduces the number of choices to be made by the user into a manageable amount (Krug, 2014). The navigational sections also have supplementary icons. These icons make good targets, as they are typically sized large enough to be easily touched through finger operation whilst still being compact enough to allow the navbar to display five icons in a relatively small space (Garrett, 2011). The icons are well designed, using common universal objects that users will have seen and used before, consequently making recognition quicker than just text alone (Piercy, 2013). The use of universal icons that are mindful of cultural differences consequently means no translation is needed for international users (Piercy, 2013). Icons are also visually pleasing and enhance the aesthetic appeal of a design, which is important as aesthetic design is perceived as more usable (Lidwell et al., 2003).
Problems solution: Case Study 1
Through a critical analysis of the Halifax mobile app in Case Study 1, several design issues were identified. To rectify these, a redesign for the payment and transaction areas of the app have been proposed, based on the principles analysed above.
For the colour scheme, the original blue has been incorporated to become the base colour of the redesign. A monochromatic colour scheme has been achieved by taking various shades of the same base colour, which in turn produces a soothing effect (Schmitz and Kühl, 2005).
Figure 8: Left: Original Halifax app. Right: Redesigned user experience design for the payment section of the Halifax mobile app
Figure 8 shows the redesigned navigational menu, categorised into five primary sections- ‘Transactions’, ‘Breakdown’, ‘Account’, ‘Payments’ and ‘Search’. Figure 8 demonstrates the ‘Payment’ section active, where further payment related options are available, which reduces the number of choices into a manageable amount (Krug, 2014). Throughout the redesign is the introduction of supplementary icons, which are common universal objects that users will have seen and used before. This will result in quicker recognition than just text alone, for national or international users (Piercy, 2013). Icons are also visually pleasing and enhance the aesthetic appeal of a design, which is important as aesthetic design is perceived as more usable (Lidwell et al., 2003).
Figure 9: Left: Original Halifax app. Right: Redesigned user experience design for the transaction section of the Halifax mobile app
Figure 9 shows the redesigned transaction section. Utilising a combination of the law of Continuity and Proximity, information such as the purchase amount, location and category icons are seamlessly combined (Koffka, 2014). Each spending category, such as ‘Eating Out’, ‘Groceries’, and ‘Shopping’ have an associated colour, and the utilisation of the law of Similarity helps categorise a person’s monthly spending habits (Koffka, 2014).
The inclusion of simple data techniques such as zero-baseline line graphs helps users see what they are spending the most on and how they compare against each other (Kirk, 2016; Rendgen and Wiedemann, 2018).
This essay has explored design principles relating to information design within a digital context. Both good and bad practices have been established for Gestalt principles, the use of data graphics and Hick’s law. Through the examination of two mobile banking app case studies, a reviewed design solution has been produced, which adheres to the design principles of information design previously analysed.
Cairo, A. 2012. The Functional Art: An introduction to information graphics and visualisation 1st ed. Harrow: New Riders.
Donalek, C., Djorgovski, S., Cioc, A., Wang, A., Zhang, J. and Lawler, E. 2014. Immersive and collaborative data visualization using virtual reality platforms. 2014 IEEE International Conference on Big Data (Big Data). 4(1),pp.609-614.
Evans, D. 2017. Bottlenecks: Aligning UX Design with User Psychology 1st ed. Berkeley, CA: Apress.
Garrett, J. 2011. The elements of user experience 1st ed. Berkeley, CA: New Riders.
Halifax 2018. Halifax UK. Halifax.co.uk. [Online]. [Accessed 18 December 2018]. Available from: https://www.halifax.co.uk/aboutonline/download-apps/.
Huang, D., Tory, M., Adriel Aseniero, B., Bartram, L., Bateman, S., Carpendale, S., Tang, A. and Woodbury, R. 2015. Personal Visualization and Personal Visual Analytics. IEEE Transactions on Visualization and Computer Graphics. 21(3),pp.420-433.
Jacobson, R. and Wurman, R. 2006. Information design 1st ed. Cambridge, Mass.: The MIT [Massachusetts Institute of Technology] Press.
Kirk, A. 2016. Data Visualisation: A Handbook for Data Driven Design 1st ed. London: SAGE Publications.
Koffka, K. 2014. Principles of gestalt psychology 1st ed. New York, NY: Harcourt, Brace & World.
Krug, S. 2014. Don’t make me think 1st ed. Wachtendonk: MITP.
Lidwell, W., Holden, K. and Butler, J. 2003. Universal principles of design 2nd ed. Beverly, MA: Rockport Publishers.
Lidwell, W., Holden, K. and Butler, J. 2010. Universal Principles of Design, Revised and Updated 2nd ed. Osceola: Rockport Publishers.
Lloyds Banking Group 2018. Halifax - Lloyds Banking Group Plc. Lloydsbankinggroup.com. [Online]. [Accessed 18 December 2018]. Available from: https://www.lloydsbankinggroup.com/Our-Group/our-heritage/our-history/halifax/halifax/.
Lowdermilk, T. 2013. User-centred design 1st ed. Sebastopol, CA: O’Reilly Media.
Martin, C. 2018. What is Monzo Bank?. Tech Advisor. [Online]. [Accessed 19 December 2018]. Available from: https://www.techadvisor.co.uk/buying-advice/gadget/what-is-monzo-bank-3644615/.
Microsoft 2015. Attention spans [Online]. Microsoft Canada. [Accessed 19 December 2018]. Available from: https://www.scribd.com/document/265348695/Microsoft-Attention-Spans-Research-Report.
Molloy, S., Scott, G. and Naomi, S. 2013. Appvertising - How Apps Are Changing The World 1st ed. Cork: BookBaby.
Monzo 2018. The bank of the future. Monzo.com. [Online]. [Accessed 19 December 2018]. Available from: https://monzo.com/.
Peachey, K. 2018. Banking by app ‘to overtake online by 2019’. BBC News. [Online]. [Accessed 17 December 2018]. Available from: https://www.bbc.co.uk/news/business-44166991.
Pettersson, R. 2010. Information Design–Principles and Guidelines. Journal of Visual Literacy. 29(2),pp.167-182.
Piercy, J. 2013. Symbols: A Universal Language 1st ed. London: Michael O’Mara Books.
Rendgen, S. and Wiedemann, J. 2018. Information Graphics 1st ed. Köln: TASCHEN.
Rudolph, S., Savikhin, A. and Savikhin, D. 2009. FinVis: Applied visual analytics for personal financial planning. Proceedings of the IEEE Symposium on Visual Analytics Science and Technology. 5(1),pp.1-8.
Schmitz, B. and Kühl, K. 2005. Designing for Small Screens 1st ed. London: AVA Publishing.
Weinschenk, S. 2011. 100 things every designer needs to know about people 1st ed. Berkeley, CA: New Riders.
Williams-Grut, O. 2015. A look inside Mondo, a bank that’s just an app. Business Insider. [Online]. [Accessed 19 December 2018]. Available from: https://www.businessinsider.com/inside-banking-app-mondo-2015-8?r=UK&IR=T.
Zhou, T. 2011. Examining mobile banking user adoption from the perspectives of trust and flow experience. Information Technology and Management. 13(1),pp.27-37.
Zichermann, G. and Cunningham, C. 2011. Gamification by design 1st ed. Sebastopol, CA: O’Reilly Media.
Adobe 2017. Monzo UX [Online]. [Accessed 17 December 2018]. Available from: https://theblog.adobe.com/uxperts-weigh-in-designs-we-love-december-edition/.
Finder 2018. Monzo Visual Budgeting [Online]. [Accessed 17 December 2018]. Available from: https://www.finder.com/uk/monzo-review.
Halifax 2018. Halifax Standing Order UX [Online]. [Accessed 17 December 2018]. Available from: https://www.halifax.co.uk/aboutonline/download-apps/faqs/.
Monzo 2018. Monzo UX [Online]. [Accessed 17 December 2018]. Available from: https://monzo.com/.
Smart Money People 2017. Halifax Transactions UX [Online]. [Accessed 17 December 2018]. Available from: https://smartmoneypeople.com/news/post/best-banking-apps-2017-part-one.