Interactive Design / Exercises
23.04.2024 - 20.07.2024 (Week 1 - Week 4)
Gunn Joey / 0366122
Interactive Design / Bachelor of Design (Hons) in Creative Media
Exercises
TABLE OF CONTENTS
1. Module Information Booklet
2. Lectures
3. Exercise 1 - Web Analysis
4. Exercise 2 - Web Replication
5. Exercise 3 - Creating a Recipe Card
MODULE INFORMATION BOOKLET
LECTURES
Week 1
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 the second level of UX Design. A designs usability depends on how well its features accommodate users' needs and contexts. An interface with high usability guides users through its easiest route to achieve its goal.
Key Principle of Usability:
1. Consistency
Ensure website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars. It includes consistent navigation system, page layout and menu structure, fonts and typography and branding in web design.
2. Simplicity
Refer to the need to minimize the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as possible, and to make it difficult to make mistakes. 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
The more visible an element is, the more likely users will know about them and how to use them. Equally important is the opposite: when something is out of sight, it’s difficult to know about and use.
4. Feedback
Feedback communicates the results of any interaction, making it both visible and understandable. Its job is to give the user a signal that they (or the product) have succeeded or failed at performing a task
5. Error Prevention
Feedback communicates the results of any interaction, making it both visible and understandable. Its job is to give the user a signal that they (or the product) have succeeded or failed at performing a task
5. Error Prevention
It involves alerting a user when they’re making an error, with the intention to make it easy for them to do whatever it is they are doing without making a mistake. The main reason this principle of error prevention is important is that we humans are prone to- and will always make mistakes.
Common Usability Pitfalls
1. Complex interfaces
2. Confusing navigation
3. Poor feedback
4. Inadequate error handling
Week 2 & Week 3
Understanding Website Structure
EXERCISES
Web Analysis - Week 2
We are required to analyse an existing website and identify areas for
improvement. In this task, I will choose two websites to analyse and write a
report from the link given by Mr. Shamsul in Google Classroom.
What to have in the analysis:
- Consider the purpose and goals of the website, evaluate whether they are effectively communicated to the user.
- Evaluate the visual design and layout of the website (colour, typography, imaginary)
- Consider the functionality and usability of the website (navigation, forms, interactive elements)
- Evaluate the quality and relevance of the website's content (accuracy, clarity, organisation)
- Consider the website's performance (load times, responsiveness, compatibility with different devices and browsers)
Deliverables:
Write a brief report summarizing in not less than 500 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
(heading/subheadings)
The first chosen website is Prand [link]
1.1 Purpose and Goals
Figure 1.1: Prand home page
Prand is an animation studio focused on bringing emotions into its creation. Their website is a vibrant online platform focused on the field of animated graphics. Their animated graphics were vibrant and colourful, showcasing their creative thinking. Stories are being told through their ideas. They aim to inspire and engage audiences with captivating animations that captivate the imagination and elevate storytelling in the digital realm.
There are many amazing animation projects on Prand. Their projects are all about emotions. They are very creative in making 2D, 3D, Collage and Mixed Style.
1.2 Visual Design and Layout
Colour, Layout, Elements:
Figure 1.2.1: Visual Design
Figure 1.2.2:Visual Design
The choice of colours of the website is very vibrant. The lively atmosphere catches users' attention. The colours that used for background are light pastel colours. Together with dark grey font colour, it creates a contrast visual effect. There are many cute and creative elements used in the website. Once users click on the faces of team members, different animated elements will appear on their faces. The layout of the website is simple, just different in sizes of frames.The layout of website is also clear and easy to understand. There is proportion used in the website.
Typography:
Figure 1.2.3: Typography
Figure 1.2.4: Typography
The font size of the header text is big enough to create visual hierarchy. Strong visual hierarchy guides audiences' visual and logical progression by showing what is important. The key point of header text is bolded and also used in a different font. The font used in description is same with the unbold header text. The spacing of the description text is just nice but it can be better if the font is bigger in size.
Imaginary:
Figure 1.2.5: Imaginary
In my opinion, there are too much elements on the main page. The animated emotion graphics obscured the title. This can affect audiences' focus point.
1.3 Functionality and Usability
Figure 1.3.1: Functionality and Usability
Figure 1.3.2: Functionality and Usability
Figure 1.3.3: Functionality and Usability
Prand's website is ease to use and effective for users which users are able to easily locate what they are searching for. The navigation is straightforward and clear. As we can see, the bottom bar lists and categorises projects into many categories. Next, users can then examine the selected project by clicking on the cover image of animated graphics. Prand functionality is highlighted by its smooth navigation. The website's animations are not only eye-catching, but they also load very quickly and run smoothly. Prand also has interactive features like buttons and image galleries, which enhance the browsing experience. They had also divided the main topics into categories, such as projects, about, sparks and have a project in the menu bar. Users with projects to work on with Prand can contact them by filling out the personal and project details.
Prand's simple layout and ease of use provide a strong usability decision. The design of the website is simple and well-organized, with clear labelling and navigation options that allow users to quickly locate what they're looking for. The website's responsive design makes sure that it looks and functions properly on all devices, from laptops to smartphones. Prand's focus on functionality and usability delivers an entertaining and fun experience for its users.
1.4 Content Quality and Relevance
Prand's website is fantastic and stands out since it features extremely nice animations created by a skilled team. They display a variety of styles and approaches, demonstrating the team's skill. The website also features a blog that discusses how animations are created and what's new in the field of animation. These profiles allow audiences to learn about the designers of the animations, including their inspirations and motivations. This personal connection gives the website a sense of authenticity, making it more interesting and relatable.
In conclusion, Prand's website is a combination of entertaining and education, offering audiences with a memorable experience.
1.5 Performance
Figure 1.4.1: Performance of Main Page with Safari
Figure 1.4.2: Performance of mouse key appearance with Safari
Prand loads faster on Safari. Many animated graphics are only supported on Safari using laptop. In contrast, Google Chrome loads slower than Safari and all those small and fun animated graphics did not appear when the mouse key reach the cover image of animation. Safari brings a better experience for users compared to Google Chrome.
Figure 1.4.4: Performance on iPhone
Figure 1.4.5: Performance of Main Page with iPhone
The size of iPhone blocked the title. The word "Conference" is not fully displayed. Users need to zoom out their screen to read the full text using iPhone.
Figure 1.4.6: Performance of the project with iPhone
Once users zoom out their screen to read the full text, the layout of images could not fit the screen. It looks untidy. This will affect users' using experience.
The second chosen website is Nokia 3310 tribute [link]
1.1 Purpose and Goals
The Nokia 3310 Tribute website highlights the well-known Nokia 3310 mobile phone, which is known for its durability, long battery life, and classic design. The site is to pay respect to the Nokia 3310's history. The website promotes the Nokia 3310's lasting appeal by displaying essential features through a combination of photographs, videos, and stories.
In addition to highlighting the phone's benefits the website aims to engage its audience by including interactive components like quizzes, polls, and user-generated material. These features enable users to contribute their own Nokia 3310 experiences and memories, which creates a sense of community among phone users.
1.2 Visual Design and Layout
Colour, Layout:
The Nokia 3310 Tribute website has a layout with the colour of green and dark grey. It features easy-to-read fonts and high-quality images of the phone. Some of the animated graphics are red colour. The homepage includes hero section, followed by sections highlighting the phone's durability and design. Navigation is simple, with a clear menu at the top.
The colour and design of the website is designed to create a classic and aesthetic look. I did some research about Nokia 3310 and found out the website's visual design looks the same like the old Nokia 3310 screen. The snake game session can also referred to Nokia's snake game.
The layout of the website is cluttered. This will cause difficulty in finding information.The designer can simplify the layout and improve the information hierarchy to enhance the overall user experience.
Figure 2.2.2: Research on Nokia 3310
Figure 2.2.3: Research on Nokia 3310
Typography:
Figure 2.2.4: Typography
Figure 2.2.5: Typography
Figure 2.2.6: Nokia Cellphone FC Font
Typography on the website is easy to read. Serif fonts are used for body text, ensuring readability across different devices. The typography of title and headings of the website looks also the same as the typography of Nokia 3310's screen. From my research, the typography of Nokia 3310 is named Nokia Cellphone FC font. The font colour of the website is black. Some of the section, font colour is red.
Imaginary:
Figure 2.2.7: Imaginary
Imaginary on the website plays a crucial role in conveying the nostalgia of the Nokia 3310. High-quality images of the phone, along with graphics and illustrations, creates a visually appealing and great experience for users. Additionally, the website features videos showcasing the Nokia 3310's features and history, further enhancing the overall visual appeal of the site. The meme hero session has high quality images. Users are able to slide and see more about the heroe section. At the bottom of the home page, the Nokia 3310 illustration moves when users scroll down. The designer is very creative in designing all this details.
Figure 2.2.9: Imaginary
The animated illustrations move from left to right repeatedly. I believe the fun and creative illustrations will improve users acceptance of this website and willing to know more about Nokia 3310. I found out the bottom outline of the cloud illustration blocked the first word "But".
1.3 Functionality and Usability
Figure 2.3.2: Functionality and Usability
The Nokia 3310 Tribute website functions properly and is user-friendly. Its straightforward design makes it easier to locate what you're looking for. The website looks great on both computers and phones since it adjusts to different screen sizes. You can click on the images and videos to find out more about the Nokia 3310. There are additional fascinating articles on the website, such as blog entries and staff biographies. The Nokia 3310 Tribute website honours the iconic Nokia 3310 mobile phone while also being simple to use and entertaining.
1.4 Content Quality and Relevance
Accurate information is crucial to establish trustworthiness. The information on the website is not complete and clear. Although this website is eye-catching as the elements and games are presented with creative, the historical details and other information need to verify and update. In addition, the information is easy to understand but I suggest the designer to write a more detailed explanation for each sections. The designer uses straightforward language and short explanation in the website. Users can quickly understand the descriptions when visiting the Nokia 3310 Tribute. The clear headings, subheadings and descriptions can help users navigate what they want to understand and find out more about Nokia 3310 easily. Moreover, the organization of the website can be better. The navigation structure can be redesign to be more intuitive, with clear headings and a logical sequence.
1.5 Performance
Figure 2.4.1: Performance on laptop
Figure 2.4.2: Performance on iPhone
Nokia 3310 Tribute loads the same time on both Safari and Google Chrome. The home page has issue of slow load times and lack of immediate clarity on the website's purpose. The designer can optimise load times and write the purpose clearly. The website fits well to mobile screen size. All the animated graphics and other elements are well arranged and presented smoothly.
Comments
Post a Comment