Interactive Design - Exercises
🐚
2024.09.26 - 2024.0x.xx
Qistina Nuralya Maria Binti Azly / 0354180
Interactive Design / Bachelors of Design (Honours) in Creative Media / Taylor's University
Exercises
Table of contents
1. MODULE INFORMATION BOOKLET (MIB)
2. EXERCISES
2.1 Web Analysis
2.2 Web Replication
3. CLASS SUMMARY AND FEEDBACK
3.1 Lecture Notes
3.2 Class Summaries
3.3 Feedback
1. MODULE INFORMATION BOOKLET (MIB)
This is the Module Information Booklet for this module:
2. EXERCISES
2.1 Web Analysis
Task: Choose TWO (2) 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.
~~~
REPORT
This report will briefly analyse the design, layout, content, and functionality, highlighting the strengths and weaknesses and providing recommendations for improvement to enhance the user experience for both Abetka.com and KidSuper.World websites.
Introduction
The Abetka website places "Project Typeface Alphabet of the Ukrainian Identity" at the forefront to serve a cultural awareness objective as part of 3MIN Grant Program 2023, in collaboration with Projector Creative & Tech Foundation. The 3MIN organization is a private organization based in Ukraine that was founded to support sustainable development and effective social transformation through systematic expert activity. Projector Creative & Tech Foundation's mission is to help in the education of Ukrainian women.
"Project Typeface Alphabet of the Ukrainian Identity" combines both organisations' missions to provide educational information, primarily focusing on typeface/font history and the learning of the Ukrainian language.
Visual Design and Layout
The website keeps a minimal colour palette of black and white with blues and yellows to help accentuate certain elements or sections of the website. The choice of using blue and yellow is mainly to proudly represent the Ukrainian flag colours.
Bold typefaces (e.g. MariupolStrong) are utilised here to give a clear visual statement and to help differentiate each section of the main page. For the body text, a thinner and user-friendly typeface (FixelDisplay) was chosen so that longer text would be easily read by users.
The website mainly relies on the scrolling feature to creatively transition from one section to another without feeling too rigid. For example, from Fig 2.1.1, once the user scrolls down further, the card in the middle flips and it brought down to show the other side of it (Fig 2.1.3) that happens to match with the next section of information.
However, it can be argued that putting all the letter cards in the homepage can make users feel overwhelmed with the amount of possible information to browse through; hence why, a separate page for said letters (categorised either by typeface or in alphabetical order) could possibly fix that issue.
Functionality and Usability
In terms of functionality, users are able to access the detailed information on all the letters easily. One way to access them is through scrolling to the section itself; alternatively, users can interact with the two lines at the top to open the navigation menu, where it displays "Home", "Abetka" and "About", then click "Abetka" to go straight to the letter cards section.
Added interactive elements like hover effects on the letter cards that show a small preview of the typefaces help in engaging users to click onto them. There is one particular part of the website, however, that had interactive hover effects on some letter elements and is shown to be clickable by the cursor but it did not lead to anywhere; so, that may cause some confusion to users.
Content Quality
The content of the website is very informative on the history of each typeface as well as the individual letters. Each letter card leads to its own separate page with detailed descriptions on its history as well as giving information on its creator. Additionally, users can also preview their own text with the selected typeface which gives users a look into what the typeface would look like if they themselves were to use it.
Performance
As the website doesn't rely heavily on 3D graphics, users are able to browse through it smoothly with little to no lag. The whole website only took 1-2 seconds to fully load.
Recommendations
- Have a separate page for the letter cards to avoid overwhelming users.
- Minor tweaks with the interactive elements to avoid confusion.
Conclusion
Overall, Abetka as a website effectively achieves its goal in educating users on the history of the Ukrainian alphabet and typefaces. Though it is mainly directed to educating Ukrainian women, typographers and designers around the world can benefit from using this website as a reference because of how approachable yet educational the website is. There is still some minor improvements to be made, however, to both the layout and the interactive elements. Apart from that, the website works great.
-
Introduction
KidSuperWorld is a collaboration project between KidSuperStudios and Basement.studio. KidSuperStudios is a fashion company that is well-known for their athleisure casual clothing and has recently partnered with Puma in creating a collection of shoes. Basement.studio is a design company that has specialists across various fields to help create their well-known websites. In 2022, they partnered up with MrBeast to create his online merchandise shop (check out their process).
This website is meant to be a unique 3D interactive online shop designed by Basement.studio for KidSuperStudios' products. It is still in progress at the moment but it can still be critiqued of nonetheless.
Visual Design and Layout
Firstly, before the actual fully revealed homepage, the background was a blank canvas with slightly visible sketches. Once users start moving the cursor though, it will slowly reveal the background to become like that of Fig 2.1.9. This creates intrigue in customers because they would be wondering on what is behind the plain canvas.
The website has a painterly theme, using a painting for the homepage and then using 3D for the actual shopping experience.
Once customers have clicked on the garage door of the building in the homepage, they would be led to this room which resembles an art studio. This is where products are placed and where customers would navigate around to find object to interact with by simply moving their mouse around.
Once customers have found an item to interact with, a menu with appear. If they've interacted with a product, the menu like in Fig 2.1.12 should appear along with a 3D model of the product that customers can look through to get a good idea of how the product looks like. However, some elements are missing; reviews and unfiltered photos of the products.
For the other interactable objects, refer to the Content Quality subheading.
Lastly, the placement of the products as of now seem too random. The puffer jacket, purse and shoes are all in the same place that if a random pattern like this were to continue in future placements, it can easily confuse a customer.
Functionality and Usability
In terms of functionality, detailed descriptions of the products can be easily found within a click. It is only a matter of finding the products to click on that could potentially pose a problem. However, with added interactive elements like hover effects on the interactable objects, it would help users to know which to click and not click.
Content Quality
In total, there are 5 total interactable objects that users can find; 3 of which being the clothing.
One of the two interactable objects left is the record player where users are free to select a record to play in the background as they continue to browse the shop. The music ranges from jazz to punk. This creates a familiar feeling for users as the record player tries to emulate face-to-face shopping by including music; however this time, users are in control of what music plays.
Last of the two is the interactable poster (top right of Fig 2.1.15) which once clicked, will trigger a short cutscene of clothes being put onto the mannequin. Said clothes are of the poster but printed onto it.
As for the overall quality, the grainy style of the website does hinder the content slightly since users would want to know what the products would actually appear like in real-life.
Performance
Trying to launch the website can take quite a bit of time because of the 3D and interactive elements. Usually it would take around 10-20 seconds for it to stay at the 99% loading percentage.
Within the actual shop, the cursor would also lag and/or have delayed input from the mouse. So it would be difficult to navigate through the mouse-reliant website if the lag/delay persists.
Recommendations
- Try to optimise the website's performance and reduce lag.
- Have separate un-grained photos or models of products to give users a clear idea of what they're buying.
- Include user reviews in the product description so that users can be more convinced to buy.
- Organisation of the products via categories or sections in the studio (shoes, coats etc.)
Conclusion
Overall, the website as it is so far is a great concept. Having an online shopping experience be like a 3D first-person game is interesting. However, there are quite a number of glaring issues especially with how the products are displayed. By taking in the recommendations, the potential for this unique 3D online shopping experience can skyrocket.
~~~
2.2 Web Replication
Task: Your task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height.
~~~
During class in Week 3, we all started practicing web replication on the same website, "Ocean Health Index". So along with that website, I decided to also replicate the "Bandit Running" website. We were all instructed to use either Figma or Adobe Illustrator so I went with Illustrator since I was more familiar with it.
For both of the websites, I used different websites and plug-ins as resources to get similar pictures as the ones withing the websites I replicated. Those resources being:
- Pexels - Free stock photos (and videos but I didn't use them here)
- SVG Repo - Free vectors of icons/ logos (able to edit colours and shapes in illustrator)
- WhatFont - Font identification
For the first website, it was a somewhat short landing page (Fig 2.2.1) so replicating the contents itself would most likely be easy. Before doing anything though, I had to section off the different sections of the website like where the header, hero, body and footer were.
WhatFont showed me that most of the text in the website was Helvetica so that's why my text is almost one-to-one replication of the original website ( ◡̀_◡́)ᕤ
For some the graphical elements that were not "just boxes", I created them on my own using the pen tool in Illustrator. For example, in Fig 2.2.3, I created the layered arc within the white box by creating multiple arc shapes with different opacities.
.png)
Compared to Ocean Health Index, the second website I chose (Bandit Running) was more lengthy. However, what took most of the space were the images they used; in total, the body consisted of around 7 parts of which contained at least one image. Similarly to the previous website, I had to section off the different sections of the website like where the header, hero, body and footer were.
Bandit had more special elements that I couldn't easily find on SVG Repo so I had to recreate them using the pen tool. For the arrow, I had to do one half and duplicate then reflect the other half to match the original arrows (Fig 2.2.8). I also changed the width of it along with how the ends of the strokes looked.
As for the logo, I traced the original logo from the screengrab. It's definitely wonkier than the original but as long as it looks okay from afar, it's fine enough from me! ( •̀ - •́ )
3. CLASS SUMMARY & FEEDBACK
3.1 Lecture Notes
Week 1 - Usability: Designing Products for User Satisfaction
We had an online lecture during Week 1 since everyone was still settling into the new semester. In that lecture, we briefly learnt about usability in design. Usability refers to how well, efficiently, and successfully a certain user can utilise a product or design in a given context. Usability in a design can make-or-break whether a user would be able to easily navigate through the design without any prior knowledge. There are 5 main principles to usability:
- Consistency : a main factor to good web design; it means making sure all parts of the website, like headers, footers, and navigation bars, look and work the same way. This helps the site look organized and operate smoothly. This includes using the same design style, layout, fonts, and branding throughout. Consistency helps users understand and navigate the site easily, reducing frustration.
- Simplicity : refers to reducing steps, using clear symbols and terms, and preventing errors. This approach improves user interfaces, helping users reach their goals faster and enjoy a better experience.
- Visibility : the more visible something is on a webpage, the more likely users will notice it and understand how to use it. Conversely, when something is hidden or not easily seen, users may struggle to find or use it. Therefore, it's important for users to easily see their options and understand how to access them just by looking at the interface.
- Feedback : acts as a signal to whether the user or design have failed or succeeded at performing a task.
- Error Prevention : notifies users when they're about to make a mistake, aiming to help them complete tasks accurately. This principle is crucial because humans naturally make mistakes, so it's important to minimize errors and make tasks easier for users to accomplish.
Week 2 - The Anatomy of a Webpage
-
Week 3 - Understanding Website Structure
-
Week 4 -
3.2 Class Summaries
Week 1
-no class-
Week 2
Had a lecture on "Usability: Designing Products for User Satisfaction".
Week 3
Week 4
Week 5
Week 6
Week 7
Week 8
3.3 Feedback
Week 1-4
-None-
🐚
Comments
Post a Comment