Interactive Design | Exercise 1
25.9.25 - 1.10.25 | Week 1 - 2
Haley Alexandra Gray | 0369029 | Bachelors of Design in Creative Media
Interactive Design GCD60904
Exercise 1 | Web Analysis
Table of Content :
Lecture Notes
Interactive Design GCD60904
Week 2 -
Usability : Designing Products for User Satisfaction
- What is usability? - Usability refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation. - It is part of UX design
- A designer's usability depends on how well its features accommodate users' needs
- When users first encounter an interface, they should be able to find their way about easily enough to achieve objective without relying on expert knowledge.- Principle of Usability
1. Consistency - A key factor in web design for both visual elements and functionality
- Ensures website looks coherent and works harmoniously
- Consistent design is intuitive design
- Includes consistent navigation system, page layout, menu structure, typography, branding.
- The key for patterns to be recognised and learned by users
2. Simplicity - Refers to the need to minimise number of steps involved in a process
- E.g. use symbols and terminology to be easy to understand
- Incorporating simplicity in a designs will help design better user interfaces by helping the users achieve their goals faster and more efficiently, all while enjoying a great user experience.
3. Visibility - Basic principle that the more visible an element is, the more likely users will know about them and how to use them
- Users should know by just looking at an interface what their options are and how to access them.
4. Feedback - Communicates results of any interaction, making it both visible and understandable
- Gives the user a signal that they have succeeded / failed at performing a task
5. Error Prevention - Involves alerting a user when they're making an error, with the intention to make it easy for the user to use.
- Common Usability pitfalls and How to avoid them -
- Complex interfaces
- Confusing navigation
- Poor feedback
- Inadequate error handling
- Its not you. Bad doors are everywhere.
- Norman door :
- A door where the design tells you to do the opposite of what you're actually supposed to do
- Gives a wrong signal and needs a sign to correct it
- Basic principles of design according to Don Norman :
- Discoverability : The ability to discover what operations one can do
- Feedback : A signal of what happened
- AKA User-centered design
- An ideal door is one where you walk up to it and aren't even aware that the door had opened and shut
Interactive Design GCD60904
Week 2 -
Usability : Designing Products for User Satisfaction
- Principle of Usability
- Ensures website looks coherent and works harmoniously
- Consistent design is intuitive design
- Includes consistent navigation system, page layout, menu structure, typography, branding.
- The key for patterns to be recognised and learned by users
2. Simplicity - Refers to the need to minimise number of steps involved in a process
- E.g. use symbols and terminology to be easy to understand
- Incorporating simplicity in a designs will help design better user interfaces by helping the users achieve their goals faster and more efficiently, all while enjoying a great user experience.
3. Visibility - Basic principle that the more visible an element is, the more likely users will know about them and how to use them
- Users should know by just looking at an interface what their options are and how to access them.
4. Feedback - Communicates results of any interaction, making it both visible and understandable
- Gives the user a signal that they have succeeded / failed at performing a task
5. Error Prevention - Involves alerting a user when they're making an error, with the intention to make it easy for the user to use.
- Common Usability pitfalls and How to avoid them -
- Complex interfaces
- Confusing navigation
- Poor feedback
- Inadequate error handling
- Its not you. Bad doors are everywhere.
- Norman door :
- A door where the design tells you to do the opposite of what you're actually supposed to do
- Gives a wrong signal and needs a sign to correct it
- Basic principles of design according to Don Norman :
- Discoverability : The ability to discover what operations one can do
- Feedback : A signal of what happened
- AKA User-centered design
- An ideal door is one where you walk up to it and aren't even aware that the door had opened and shut
Instructions
Week 1 | Exercise 1
Write your report in e-portfolio
Choose FIVE (5) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.
Write a brief report summarizing your findings and recommendations.
What To Have in The Analysis:
Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user. Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. Consider the website's performance, load times, responsiveness, and compatibility with different devices and browsers.
Deliverables:
Write a brief report summarizing each Web Analysis in not less than 200 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (headings/subheadings)
Exercise | Web Analysis
- Purpose/Goals of website : if is effectively communicated to user
- Visual design / layout : colour, typography, imagery
- Functionality / usability : navigation, forms, interactive elements
- Quality/relevance of content :accuracy, clarity, organisation
- Performance, load times, responsiveness, compatibility with different web browsers/devices
Website List :
_____________________________________________
Website #1 : Bright Biotech by Lyon & Lyon
 |
| Fig. 1 Bright Biotech introductory page |
Purpose / Goals
This website is about "Growing a Better Future" where they specialise in creating safe and sustainable proteins for cell culture and regenerative medicine by expressing recombinant proteins in plant chloroplasts. The website's goals are to inform us about their product/mission, whilst also advocating for a healthier future through the change their product can make for the world, and lastly to inform us about and highlight their team and career opportunities in their company.
Visual Design
The overall visual design is very simplistic and pleasing, where the use of design elements complement each other and align with the company's specialisation which can be discerned as a science-ie background (biology), appearing as a trustable and cohesive company.
 |
| Fig. 4 3D imagery and layout of the website |
The layout of the website is simple and the information flows smoothly and chronologically as you move on, with animations that add to the experience and creativity, as well as the interactive icons being in sight.
 |
| Fig. 5 Menu page |
Quality / Relevance
The website's quality of information is clear and concise, describing the product, their mission, and the effects of the product in a simple yet effective manner in the main page, and additionally have other pages located in the menu specifically for more information on their technology, as well as mission & team.
If you are unfamiliar with science like me, the initial information is a bit hard to grasp as to how their product works or what it is exactly, however by reading further you begin to understand more, especially about the mission and benefits of the product. There are no grammatical errors however, and the organisation of the information is chronological and easy to follow.
Performance
The website performs well despite having 3D elements as the main visual points of the website, where things flow smoothly and is quite fast. According to PageSpeed Insights,
 |
| Fig. 6 Desktop performance statistics of Bright Biotech |
Other Devices
The compatibility of this website on other devices (mobile) and browsers are good and fast, however it lags a little bit due to the heavy and enlarged graphics, and it also loses a bit of information due to the smaller screen size for mobile devices. The site of the day is not part of the website but covers a bit of the screen, which is not so convenient. But overall, it works fine and is still supportable on mobile.
 |
| Fig. 7 Mobile display of website |
Strengths :
- Good visual design that aligns with the brand's identity and mission
- High quality visuals to enhance user experience and impression on the product
- Simple and straightforward layout and navigation to assist the user
- Concise and relevant information presented organizedly throughout the website
- Fast performance overall
- Visual's animations take a while to pass, interrupting the flow of the website
- Heavy graphics for mobile to handle, creating slight lags
- On mobile less information is presented, hindering the full experience and knowledge of the user
Website #2 : Stiff by Buzzworthy Studio
 |
| Fig. 8 Stiff website |
Purpose / Goals
Visual Design
The visual design of this website brings a positive vibe and tone that matches their area of expertise exactly (comedic content).
1. Typography
The elements work together to create this tone, where the typography of the website is very playful and bold, using capital and bold letters, and unique fonts that direct your attention to it immediately. The use of fonts is very striking, and the placement of text communicates their intended message or information very well, and integrates itself seamlessly together with the rest of the layout.
 |
| Fig. 9 Typography of Stiff website |
2. Layout
Speaking of layout, the website flows from right-to-left rather than up-to-down, which allows their media to flow smoothly and transition from one topic to another. The distribution of the content on their page is unique and asymmetrically balanced, guiding the eye from one thing to another chronologically.
 |
| Fig. 10 Website layout |
3. Colour & Imagery
The website uses a primary-colour palette throughout their website, allowing the colours to be able to work together, as well as stand out from each other to highlight the different information, text, and sections of the website. It also fits their brand image as the colours don't come off as serious, more like playful and simple - much like the imagery they use. Aside from the content they display, they have simply drawn and fun 'characters' or images that add to the website and express who they are.
 |
| Fig. 11 Colours and Imagery of Stiff |
Functionality
 |
| Fig. 12 Organised interactive elements of the news page on Stiff |
Quality / Relevance
The quality of their content appears to be high, not just in terms of the brands they work with, but the appearance of the website seems to be very well designed and thought-out, and provides an abundance of information fluently through organisation. All information seems relevant towards what their company is about, and the wording of phrases present in certain sections of the website are smart, playful, and adhere to the tone of their company.
 |
| Fig. 13 Quotes from the website that align with their comedic specialisation |
Performance
 |
| Fig. 14 Desktop performance statistics of Stiff |
Other Devices
The website works about the same on a different browser (Safari), and its compatibility for mobile works well, except for having the same issues on desktop where the blocking time and speed between interactions is slow. However, on the mobile version it doesn't leave any information out and adjusts its' layout to fit all its information without being too overwhelming. So overall, the experience on desktop and mobile is fairly similar and has the same experience.
 |
| Fig. 15 Mobile display of Stiff website |
Strengths :
- Good / quality visual design and content that aligns with the brand's identity
- Unique layout structure for desktop that follows a sideways scroll
- Organised layout and navigation, and concise display of information
- Striking and bold typography that shows quality of content and captures the audience's attention
- Responsiveness to interactions are relatively slow
- A lot of moving visuals which makes the website longer to process and get through as you scroll
Website #3 : Joy From Africa by SALT AND PEPPER
 |
| Fig. 16 Joy From Africa website |
Purpose / Goals
Joy From Africa To The World is an organisation that interprets the festive season in their own, sustainable, way that collaborates with a community of artists to display their art as a homage towards Cape Town and its culture, and the purpose of this website is to tell us about their story and what they have going on for the current year, showcasing their installations and informing us on the impact of their campaign. Their goals are to spread African culture to the world and to share their creations and take on the festive season with us, and advocate for sustainability through their practices.
Visual Design
1. Imagery & Colour
The visuals from this website are very uplifting and playful, where the imagery together with colour that is used defines and expresses the main message of their website pertaining to their Cape Town Love Song, where there are unique and bright illustrations of expressive hybrids of the flora and fauna of Cape Town mixed with musical themes. It is a very colourful website which communicates the colour and beauty of the culture they want to share with us, and creates a bright and cheerful mood.
 |
| Fig. 18 Layout of website and contents |
Functionality
 |
| Fig. 19 Full layout and navigation display |
The website is easy to navigate, where you are greeted by an introductory video (which you can skip), and then to the menu, with the main page about their story. It lets the user control what part of the website they would like to explore next, however maintaining chronological order of their pages and information, serving as easy guidance throughout the website. The display is also accompanied by interactive icons that stand out, such as an overall menu and sound on/off switch in the corners of the page.
Quality / Relevance
The quality of their content is clear, proper, organised, and able to express enthusiasm for their cause through the design and wording of information. The elements displayed in the website are relevant towards the main theme of the website and purpose, and creates an enjoyable and knowledgeable experience. It is very informative and provides a lot of background towards their story and showcases their artwork.
Performance
The performance of this website is good, where its contents load and respond well. According to PageSpeed Insights, it has a relatively high performance score which indicates it is well optimised for desktop users, however it's total blocking time is a bit slow as well as speed index, impacting the overall speed and responsiveness of the website.
 |
| Fig. 22 Desktop performance statistics of Joy From Africa |
Other Devices
The performance of this website on a mobile device is good and responsive. The performance does not really differ from the desktop performance and it performs just as well on mobile, with the same amount of visuals and information provided, not leaving anything out which gives the same experience you'd get on the desktop version.
 |
| Fig. 23 Mobile performance of Joy From Africa |
Overview
Strengths :
- Simple and straightforward design and navigation
- Appropriate and unique imagery and visuals that express the company's identity well
- Very informative and provides a lot of insight / information towards their cause and content
- Minimalistic design and layout, making the website easier to process
- Some moving visuals which makes the website longer to process and get through as you scroll
____________________________________________________
____________________________________________________
Website #4 : Aircord by Garden Eight
 |
| Fig. 24 Introduction to Aircord |
Purpose / Goals
Visual Design
 |
| Fig. 25 Aircord layout |
The colours of the website add to the experience, where monochrome colours of the background emphasise the projects and points the user towards the next step. The other colours come from their projects, which are bright, neon colours that are part of the technology they use which contrasts with the dark environment the works are displayed in, matching the website's theme.
3. Imagery
The imagery on the website comes from the photos of the projects, where they demonstrate the abilities of this company as well as adds to the aesthetic of the website through good and expressive photography of technological, futuristic themes.
 |
| Fig. 26 Colour scheme and imagery |
Functionality
 |
| Fig. 27 Navigation and menu |
 |
| Fig. 28 Symbol that adds to user guidance |
The website functions smoothly and navigates well, with a navigation menu icon at the top corner, and a general set of icons labelling the rest of the website at the top of the screen, to ensure easy navigation and access. In terms of viewing the rest of the website, it is very smooth and engaging from the immersive aspect, and there are labelled buttons to guide the user to progress, as well as a 3D icon following the cursor and indicates the next move the user should make when hovering over elements of the website, which is helpful.
Quality / Relevance
 |
| Fig. 29 Information and relevant pictures provided about the company |
Performance
The load time and responsiveness of this website is fast despite having heavy visuals and an immersive background. There are animations that transition between interactions, but they do not take long to respond and do not disrupt the flow of the website.
 |
| Fig. 30 Desktop performance statistics of Aircord |
Other Devices
The performance and compatibility of this website on a mobile device is surprisingly good, where the website is still able to keep the immersive design of the website working without much lag, and it adapts to the mobile screen and alters the layout to make all the information and pictures fit and still visible to the viewer, ensuring the same experience as using a desktop. However, with less modern devices the results could be different and this website could take a while to load or enable the immersiveness of the design.
 | |
|
Overview
Strengths :
- Immersive design that engages the user and helps express their brand identity
- Good compatibility and performance with devices and browsers
- Very informative and provides a lot of insight / information towards their content, does not lose any information in mobile layout
- Straightforward navigation with informative symbols and labels
- A heavy reliance on videos and images, lacking imagery and other forms of expression, which can be bad if users are having difficulties loading the website, meaning users might not get any meaningful content until everything loads.
- Website definitely has heavy data and content, might not be compatible with older devices / slow internet
____________________________________________________
____________________________________________________
Website #5 : Photoyoshi by Takamitsu Motoyoshi
 |
| Fig. 32 Introduction page to Photoyoshi |
Purpose / Goals
Visual Design
The overall design is minimalistic, with the main emphasis being on his photos. There isn't much imagery on the website, for his photos being the main point of attraction. You could argue that the website utilises his photography as decoration for the website due to its layout. However, the motion graphics represent imagery of a film scroll when you scroll fast on the website, which is a fun detail.
 |
| Fig. 33 Photos and imagery to the website |
2. Layout
Pertaining to the layout, there are two versions of display in the website, where one has a grid-like view of his photographs and categories, while the other is more full-screen of just the categories. In the grid-view layout, the flow transitioning through categories is smooth.
 |
| Fig. 34 Grid layout |
 |
| Fig. 35 Slideshow layout |
3. Colours
Functionality
 |
| Fig. 36 Navigation and functionality of the website |
Navigating the website is straightforward, with not many parts to the website overall. The user is introduced to the main page showcasing the photographs, and there are menus at the top corner of the website directing the user to the about page of Motoyoshi. There is also an option at the bottom corner of the screen to switch layout designs to cater to how the user wants to interact with the website. Overall, it is easy to navigate through, and flows smoothly with a suitable animation between categories.
Quality / Relevance
The quality of the information displayed on the website is concise and organised consistently and in their relevant section. Despite not having much information about photographs or text in general, the quality of the content (pictures, labels, about) is good, accurate, and organised.
Performance
The performance of this website seemed fine as I used it, but according to PageSpeed Insights, the performance is relatively low, with a TBT of 20.620 ms, which is a really long wait time in order for the website to respond, as well has having a speed index of 5.3s.
 |
| Fig. 37 Desktop performance statistics for Photoyoshi |
Other Devices
The performance and compatibility of this website on a mobile device is quite slow, with motion graphics part of the layout, and including many photo files in the website, it became a bit laggy to use. However, the information and images are presented well and displayed in a convenient way that suits the mobile device layout. It retains the same design style as the desktop, which gives the same experience to the user, however might make it harder to process and load on a mobile device.
 |
| Fig. 38 Mobile display / performance of Photoyoshi |
Overview
Strengths :
- Minimalistic and simple layout, easy to navigate
- Visual design is cohesive and pleasing, with soft and earthy colours that complement the photography
- Retains style and information throughout different devices
- A heavy reliance on images, which can be bad if users are having difficulties loading the website, meaning users might not get any content until everything loads.
- Not a lot of content / details regarding pictures
- Slightly laggy and slow due to high concentration of images
Feedback
________
Week 2 (2/10/25)
Reflection
Experience :
Observations :
Findings :
Comments
Post a Comment