UX and UI are concepts used to describe why design choices are made and how those choices affect the user. More specifically, UX (user experience) is the experience evoked when a user uses a product in which user experience design considers all the elements which effect this experience. Thus, it is the quality of an interaction which a user experiences. For example, how easy is it to use a product, how easy is it for users to get what they want to form the product? On the other hand, UI (user interface) focuses on the presentation and interactivity of the product. UI considers, colours, typography, spacing and responsive design (Lamprecht, 2002).
The UX will be analysed primarily by look at Peta Goldberg’s A Crash Course in User Experience and Interface Design and the UX theories therein.
Restorff Effect: “When multiple similar objects are present, one that differs from the rest is most likely remembered.” I think that I have somewhat done this within my website. Firstly, by making my link words different colours ie. It says find the article “here”, and the here is a link. And secondly, through some of the UI elements such as the scroll bar, the back to top button in the design page and by highlighting the name of the active page in the navigation bar.
Position Effect: “Users have a propensity to best remember first and last items in a series.” In my blog post pages I think I have done this very well. The title of the blog is at the top of the page and the date it was written is at the bottom – both are information which I think is important.
I think one of the pages on my site which gives users the worst experience must be blog post page and the design page. Even though I don’t think the design page is that bad, I will say that both pages are filled with long pages of text, and poorly aligned images (if any). I think these things are most prevalent when one views my website on the phone. The images because squashed and overlap, and the text seems infinitely longer. In general, I frown upon my navigation bar and how it looks when a user sees my website on their phone. The bottom half of it (with the page names) stays in a fixed position if the menu is not closed again. One way that I think I can make the experience better on these pages might be, on cell phone view, have a progress bar so that users get a sense of progress. This is also the Zeigarnik Effect. Overall, it seems like it is mostly because my UX on a smaller device than a laptop has been poorly considered/implemented.
The UI will be analysed primarily by look at Peta Goldberg’s A Crash Course in User Experience and Interface Design and the design theories therein.
We will begin with the bad UI first because this will follow along as to why I think my UX is bad/worse than necessary. UX and UI are layered design decisions which all contribute to the feel, experience and enjoyment of a product. One of the contributing reasons as to why I think my blog post pages and my design page is because of the long texts. The entire post is in the same text and has no pictures – this, to me, makes it difficult to read and detracts from my enjoyment. Additionally, the navigation bar in small devices modes is not consistent. Sometimes the options are aligned in the centre and in other pages it is slightly off.
Text: I chose my text to be sans-serif because this is the text which is apparently most easy for dyslexic people to read. All the lines in the text paragraphs begin at the same point, and the background colours of these parts are not white so there is not stark contrast between the background and the text, these things make it more comfortable to read on my site. In the blog posts, the text is in the centre and has padding around it for some radial symmetry. For visual weight, I think this is much more appealing to see and interact with.
Colour: I think I did well with my colour palette. It feels very warm, and I think I made good choices for the colours of things I want to emphasise. For example my timeline which is aligned in the centre but asymmetrical, stands out really nicely against the peachy background. I also think that the gold against the white is quite nice.
When I was reading the 2009 article from Luis Francisco-Revilla and Jeff Crow, 'Interpreting the layout of web pages', I was able to identify the type of layout of my website.I would say that it is a modular layout. This means:
[Modular layouts] use a combination of vertical and horizontal shapes to package the information. Modular layouts provide a clean and simple appearance, improve legibility, save time in the production process, provide significant advertising advantages, and, more importantly, readers prefer them.
To me, this substantiates some of the design choices I unknowingly made, and helps me to believe that my goal of the website (to have it be professional, simple, and easy to use) has been achieved through the layout.
[1] Bad UX design: Examples and Ways to Avoid Such Practices. (n.d.). Retrieved from Ramotion: https://www.ramotion.com/blog/bad-ux-design/ 2] L. Francisco-Revilla, J. C. (2009). Interpreting the layout of web pag. HT. [3] Goldberg, P. (2022) ‘A crash course in user experience [+] interface design’ [Lecture], WSOA3028A: Interactive Media IIIA. University of the Witwatersrand, Johannesburg. [4]Lamprecht, E. (2002, June 7). The Difference Between UX and UI Design – A Beginner’s Guide. Retrieved from Career Foundry: https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/#what-are-ux-and-ui-in-the-first-place