This blog post explores the implementation of UX and UI practices within the site. The discussion will include achievements of design goals and pain points regarding the overall experience of the site. According to Benyon (2013), a good user interface results in successful user experiences. To dissect my overall UX and UI, we must first interrogate the standards of UI design and the principles applied. I will use the standards outlined in AAAhttps://ulwazi.wits.ac.za/courses/34222/files/3697647?module_item_id=404332.

User Centered Design

The design decisions made have been made in the mind of my intended user of Swifity. The intended user for this site would be a Taylor Swift fan. For this reason, I have made specific design choices. The use of fonts such as the one used for titles and navigation is a font that Taylor Swift has used on her albums. A fan of Swift’s would easily recognise this upon entry of the site and therefore shows that the site has been designed with the user in mind.

Apart from a hypothetical recreational user, the user in mind for this site is primarily you - the lecturer. This causes a sort of meta-user predicament. I have therefore had to balance design for the lecturer and adhering to design principles of designing for the user. I have made accommodations such as putting the blog at the forefront and changing the design strategy. I approached the UI design as if it was Taylor Swift's actual website to promote Folklore. I then adapted this concept and populated the site with information relevant to the lecturer.

Clarity

I believe that behavioural clarity is clear in regard to navigation and site architecture. This is because elements can be clicked over and give the user feedback which is a convention and there are clear titles throughout the site. When addressing and inspecting the pure design elements of the site that do not include the actual data visualizations, I believe that a good standard of clarity has been achieved. I have ensured that patterns regarding navigation and layout have been adhered to. This can be seen in the top positioning of the menu. This is an established convention and therefore users have been accustomed to this being at the top and the footer being at the bottom. In this case, I have adhered to the conventions of clarity.

Clarity can be seen as lacking in the technical elements of the website. This is in reference to the clarity of my charts. In some situations, conventions have been subverted for reasoning and in others, clarity has been abandoned due to technical difficulties with d3

Cognitive Load

My website has both increased cognitive load and lessened it. According to the basic principles of UI, the user should be able to access information within 3 clicks. This is true for the site. I have ensured that all information can be accessed within 3 clicks and this can be put into practice. From this page, the user can access my exam data art with three clicks by first using the nav bar to navigate to the data section(1) and clicking on the exam art post (2). In this sense, the cognitive load has been eased with simple access to information.

Cognitive load may also be heightened on the site. Because there is a disconnect between user base, visualizations have not been simply labelled as “static visualization1” etc, instead, they have taken on the names of Swift albums and therefore this can cause confusion. The sometimes lack of labelling on d3 svgs may also result in heightened cognitive load.

There is also not a consistent provided next step. The next step has been used in the blog template and home page visualizations yet this is not consistent throughout the site. If there is a user just exploring the site, they can easily misunderstand where to go on the site and navigate through it.

Accessibility and Flexibility

Accessibility allows for a greater audience to interact with the product. Flexibility results in the same expanded user base. This website has a lot of room for improved accessibility and flexibility. Fonts can be changed to become more readable if the main fonts are sans-serif or dyslexia and neurodivergent friendly such as Arial. The accessibility can be improved by adding more microformats and detailed headers or longer descriptions in the alternative text for images.

This site can also be optimized better in terms of media queries. The site works very well in terms of remaining extremely useable on devices bigger than 700px wide. I believe to achieve better flexibility, the CSS construction approach must be changed. This can be done through changing CSS values to percentages rather than pixels.

Simplicity

Swiftify has been an attempt to create visualizations all about Taylor Swift. The focus of the site changed quite a bit from the initial ideas early on in the semester. According to the Basic Principles of UI, Simplicity is key. For this reason, I have decided to keep the UI of my site as minimal as possible while still aligning itself with the scope of my design guide. The home page consists of a simple picture of Taylor Swift, along with her name. This is to establish the theme of the site immediately to the user. This bare-bones approach allows for immediate recognition.

This use of simplicity results in memorability (Bevan and Petrie pp 2) as the core subject matter is unique and clearly defined. This, therefore, increases the user experience.

In conclusion, this website has both achieved elements of good UX and also provided and environment for UX failings. I believe that a large reason for this is my want to satisfy to greatly different users; fan and lecturers. This creates a disconnected UX because who is the true user? This has demonstrated the importance of clearly defining ones user base when in the position of product design