UI principles to be applied to your design
Design Laws
Figure 1 displays a hierarchy chart on design laws. In order to apply UI principles the prototype designs, it is important to understand what the principles consist of. The chart is made up of 8 different basic laws in UI design, expanding on that is a basic definition on what each of the laws entail. By gaining a better understanding on what the laws mean, these principles can be applied to the prototypes, ideas of what to include stem from the definitions.
Call to action
A call to action is often displayed as a button or a text hyperlink. CTA’s are used to prompt a user into taking a specific route through the website. CTA’s can be simple such as learn more or more obvious such as join now or try it now. A strong CTA can help to boost sales and furthermore revenue and profit. A CTA is primarily used as a marketing tool.
In relation the the festival website and app, a call to action put would be to drive ticket sales through the website. CTA’s could also be found on other pages of the site to drive clickthrough rates, which in return, will boost the ranking of the website within search engines like Google.
Call to action example
Figure 2 is a flow chart based on the process taken when the user clicks a CTA button. There are 2 processes, 1 based on cookies and the other based on ticket purchasing, both coming from the homepage of both the website and app.
Applying usability goals to the user interface
Usability is defined by five main components:
- Learnability
- Efficiency
- Memorability
- Errors
- Satisfaction
Bearing these five components in mind, the design must be learnable and easy to use so new users do not struggle to use the website and app, efficient so the users can complete their task on the website or app quickly, memorable that the user finds the design easy to remember where elements are stored within the website or app, all errors must be handled effectively and finally, the design must satisfactory, it must be pleasing to use and nice to look at.
No one ever compliments a well designed and user friendly website or app, but they always complain if it is awful to use or looks bad. With that in mind, if nothing is said about the design, it is safe to assume its good.
The UI across both the app and website will be consistent, keeping the same colour scheme, typography, functions and icons throughout. With the users journey starting with the website, when they move to the companion app, the aim is that they will already have an idea how to use it due to the predictability and consistency in the design. It is important that the user begins to feel familiar with the designs as the app is something they will use regularly throughout the duration of the festival.
Stakeholder interface diferences
The design of both the website and app must meet the requirements of all the stakeholders. While the designs won’t differ, it must accomplish what is required of it form each stakeholder. The stakeholders are:
- External-Customers
- Internal-Customers
- Investors and Owners
External-customers are the customers of the festival, these customers must be able to find all the relevant information about the festival along with being able to purchase tickets and view tickets. Other useful features are easy ways for customers to contact employees of the festival.
Internal-customers are employees of the festival, the design of the website must aid them in their job, for example, providing QR codes for tickets making it easier for both customers and employees. Holding relevant information about the festival that employees can direct customers to will also assist employees.
Investors and owners of the festival require the website and app to be a companion to the event. It will assist in their event standing out from others which should help to drive sales of the festival, meaning more revenue and profit.
The UI principles remain across the board regardless of the stakeholder. However, the app and website must be usable and accessible by all of them.
References
- Medium. 2019. 7 laws of UX design (with illustrations). [ONLINE] Available at: https://uxdesign.cc/7-important-laws-of-ux-design-fdda087b4f9d. [Accessed 7 March 2022].
- Medium. 2017. Design principle: Hick’s Law — quick decision making. [ONLINE] Available at: https://uxplanet.org/design-principles-hicks-law-quick-decision-making-3dcc1b1a0632. [Accessed 7 March 2022].
- Interaction Design Foundation. Unknown. Fitts’ Law. [ONLINE] Available at: https://www.interaction-design.org/literature/topics/fitts-law. [Accessed 7 March 2022].
- The Behaviours Agency. 2021. VON RESTORFF EFFECT: THE BEHAVIOURAL BIAS SERIES. [ONLINE] Available at: https://thebehavioursagency.com/von-restorff-effect/. [Accessed 7 March 2022].
- Coglode. Unknown. Zeigarnik Effect. [ONLINE] Available at: https://www.coglode.com/research/zeigarnik-effect. [Accessed 7 March 2022].
- AB Tasty. 2021. Using Serial Position Effect in UX Design. [ONLINE] Available at: https://www.abtasty.com/blog/using-serial-position-effect-ux-design/. [Accessed 7 March 2022].
- Nielsen Norman Group. 2020. The Principle of Common Region: Containers Create Groupings. [ONLINE] Available at: https://www.nngroup.com/articles/common-region/. [Accessed 7 March 2022].
- Nielsen Norman Group. 2020. Proximity Principle in Visual Design. [ONLINE] Available at: https://www.nngroup.com/articles/gestalt-proximity/. [Accessed 7 March 2022].
- hubspot. 2021. 40 Call-to-Action Examples You Can’t Help But Click. [ONLINE] Available at: https://blog.hubspot.com/marketing/call-to-action-examples. [Accessed 10 March 2022].
- WQusability. 2001. What Does Usability Mean: Looking Beyond ‘Ease of Use’. [ONLINE] Available at: https://www.wqusability.com/articles/more-than-ease-of-use.html. [Accessed 10 March 2022].