Interactive Design / Exercise 1 : Web Analysis
23/4/2025 - 30/4/2025 (Week 1 - 2)
Rachel Ng Jie Ting/ 0378902
Bachelors of design (Honours) in creative media
Interactive Design / Exercise 1 : Web Analysis
Table of content
Week 2 : Usability: Designing Products for User Satisfaction
Lectures
Week 2 : Usability: Designing Products for User Satisfaction
- Usability refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation
- It is a part of User Experience (UX) Design. It is the second level of UX Design
- A design’s usability depends on how well its features accommodate users’ needs and contexts.
- 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
- An interface with high usability guides users through its easiest route to achieve its goal
Key Principle of Usability
1. Consistency
Keep things the same throughout the website so users know what to expect. For example, if clicking a button takes you to a new page, it should do the same thing every time you click it.
2. Simplicity
Make things easy to understand and use. Don't overload users with too much information or options. Keep it simple and straightforward.
3. Visibility
Make important elements easy to see and find. Use clear labels, buttons and menus so that the users know where to go and what to do.
4. Feedback
Let users know what's happening, like for example, if they click a button show them that something is happening, like a loading animation. This will help the users feel in control and understand what they're doing.
5. Error Prevention
Try to stop mistakes before they happen. Use clear instructions and prompts to guide users, and design forms or interfaces to minimise errors. Helping the users have a smooth experience.
Instructions
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 summarising 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, including its load times, responsiveness, and compatibility with different devices and browsers.
Deliverables:
Write a brief report summarizing in not less than 200 words for each website analysis. 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)
Purpose and Goals
The purpose of the Dropbox Brand website is to provide a centralized, easy-to-use resource that ensures consistent and accurate representation of Dropbox’s visual identity.
Aimed at designers, partners, and media professionals, it offers clear guidelines, downloadable assets, and creative inspiration to maintain brand integrity across all platforms. The site not only functions as a practical toolkit but also reflects Dropbox’s innovative and creative spirit through its engaging and visually dynamic design.
Visual Design and Layout
The homepage of the website is clean and simple, scrolling down zooms out to reveals the full homepage of the website.
The visual design and layout of the Dropbox Brand website are bold, modern, and highly engaging. It uses a clean, grid-based structure enhanced by dynamic animations, playful typography, and a vibrant color palette. The typography used is clean and gives off a corporate feel, easy to read.
One thing to note, there is no scroll bar. Some users may find this disappointing.
Also, the typography in some parts of the website (See Fig 2.2) is very small, making it hard to read.
Functionality and Usability
Navigation is straightforward, each box takes the user directly to key sections such as logo, color, typography, and imagery. The structure is clean, making it easy for users to find specific brand assets or guidelines without confusion. Interactive elements, such as hover effects, animated transitions, and expandable content panels, enhance engagement while maintaining clarity.
For example, in the colour section of the website, Dropbox showcases how they use colour across their platform. By changing the mouse into a colour picker tool, users can interact with the colour wheel on the top right corner and see how colour is applied in the 3 pictures below.
Quality and Relevance
The content is accurate, consistently aligned with Dropbox’s core identity, and effectively communicates complex design principles in a clear and accessible manner. Each section is logically structured, enabling users to navigate the site with ease and locate specific information without confusion.
Performance
The website's performance is smooth with no loading delays, even with many pictures and animations. It is also compatible with different screen and devices. Interactive elements that require one to 'hover over' for it to work has been changed to tap or scroll, making them functional even in mobile browsers.
Purpose and Goals
The purpose of the Coffee Roasting Man website is to showcase and sell specialty coffee beans roasted by Marjan Njegrić, who founded the roastery in Kikinda, Serbia, in 1996. This website also serves to promote their own cafes and selling their coffee beans to other stores or cafes.
Visual Design and Layout
The visual design and layout of the Coffee Roasting Man website reflect a minimalist and artisanal aesthetic, aligning well with the brand’s focus on specialty coffee. The homepage features a clean layout with earthy tones and high-quality imagery of coffee beans and brewing methods, creating a warm and inviting atmosphere.
Fig 2.8 - Visual art of Coffee Roasting Man
Typography is simple and legible, using a modern sans-serif font that reinforces clarity and professionalism.
Fig 2.9 - The Art of Coffee Roasting
Functionality and Usability
Navigation is straightforward, with a top menu that includes clear categories such as “Cart,” “Shop,” and “Contact.” The product pages are well-organized, each featuring detailed descriptions and tasting notes.
Interactive elements such as the shopping cart function reliably, and the checkout process is straightforward with clearly marked steps.
Quality and Relevance
Performance
The website performs well on both desktop and mobile platforms, with
responsive design that maintains usability across various screen
sizes.
Purpose and Goals
This website is a portfolio of globally recognized Independent Designer and CreativeDirector based in the Netherlands, Bruno Arizio. The purpose of Bruno Simon’s portfolio website is to showcase his creative and technical skills as a WebGL developer through an engaging and interactive experience.
By transforming his portfolio into a 3D driving game, Simon aims to demonstrate his proficiency in WebGL and Three.js, highlighting his ability to create immersive web experiences.
Visual Design and Layout
Visually, the design features a playful, low-poly aesthetic with vibrant colors and smooth animations. The use of WebGL and Three.js gives depth and realism to the environment, making the user feel like they’re navigating a mini open-world game rather than browsing a website.
Typography is clean and modern, often understated to let the 3D visuals take center stage. It’s used sparingly but effectively, ensuring that text elements like labels, menus, and project titles are legible and don’t distract from the immersive environment.
Functionality and Usability
Users navigate the portfolio by controlling a small 3D car using keyboard inputs (WASD or arrow keys), exploring a stylized 3D environment where each signboard leads the user to different sections of the portfolio —Projects, Information, and Playground.
Interactive elements, such as ramps, buttons, and physics-based objects, are both functional and fun, encouraging exploration while still providing a clear sense of direction.
Quality and Relevance
The site’s 3D world is logically structured, with different sections (like portfolio projects, information, etc.) placed in distinct areas of the virtual environment. The layout is clean, ensuring that each part of the portfolio is easy to access.
At the project section of the website, each website project have a description of the work, what awards it has won, Bruno Simon's role in the project, and name of people that work in that same project. There is also a interactive box that takes the user to the featured website.
Performance
Interactions are responsive, smooth, and well-optimized across modern browsers. Though mobile usability is limited due to the complex 3D controls, the site performs exceptionally well on desktops, with some slight stuttering sometimes.
Purpose and Goals
Rivora systems is a company that offers custom software built for startups and small businesses. From sleek websites and robust backends to scalable software solutions, this company specialize in crafting tailored software that helps businesses grow without the overhead of large teams. The purpose of this websites is to showcase the company's technological solutions and services. The site aims to present Rivora Systems' offerings in a clear and professional manner, highlighting their expertise and commitment to innovation.
Visual Design and Layout
Design wise, sleek and minimal, with no pictures. At the bottom of the website, there is a very subtle rolling text that displays 'Rivora System'. The design uses a minimalist aesthetic dominated by black and white. For contrast, a pale yellow and orange gradient is used to lightly decorate the website, creating a clean and futuristic feel appropriate for a tech solutions provider.
The layout is follows a grid-based structure with generous white space, giving each element room to breathe and helping users to focus on key content.
Functionality and Usability
Navigation is straightforward, typically through a top menu bar, and the content is broken into distinct sections such as services, about us, and contacts—making the site easy to explore.
Interactive elements, such as hover effects on buttons, with the page blurring expect on the selected icon, bring focus to said content. Smooth scrolling transitions enhance user engagement without becoming distracting. Pages load quickly, and animations are subtle, helping to maintain a professional tone while adding a layer of modern polish.
Quality and Relevance
The content is precise and well-aligned with the company's focus on innovative tech solutions. Descriptions of services and products are detailed and factually consistent, reflecting a deep understanding of their services.
Information is presented in a straightforward manner that can be understood by both technical and business-oriented visitors. Headings and subheadings are clear and descriptive, allowing users to quickly grasp the purpose of each section.
Performance
The website's performance is smooth with no loading delays, also compatible with mobile devices and different screen sizes.
Purpose and Goals
The Skyline Chili website serves as a platform to promote and celebrate the brand's iconic Cincinnati-style chili, offering information on their menu, locations, catering services, franchise opportunities, and retail products. It aims to enhance customer engagement by providing easy access to online ordering, showcasing limited-time specials, and sharing recipe ideas.
Visual Design and Layout
The websites design gives off modern retro vibes, using vibrant colours of blues and yellows, with a bit of red, echoes the brand’s logo and aligns with the lively, casual atmosphere of their restaurants.
Typography is bold and legible, often paired with playful styling that adds to the brand’s cheerful tone. Headers stand out well, while body text is simple.
The layout is clean, with a side navigation menu that makes it easy to access key sections such as the menu, about us, recipe idea, and many more. The homepage features high-resolution images of their signature dishes—like coneys and 3-Ways—which are strategically placed to grab attention.
Functionality and Usability
Navigation is intuitive, with a fixed top menu that grants easy access to key sections such as the Menu, Locations, Order Online, Catering, and About Us. The use of clear labels and straightforward page structure ensures that users can quickly find the information they’re looking for without unnecessary clicks. Other than that, a search bar is available for users to search keyword in the website.
Forms—such as franchise inquiries or contact submissions—are concise and user-friendly, avoiding information overload while still collecting necessary data. Button placement and design are consistent and clearly signal interactivity, enhancing overall usability.
Quality and Relevance
The website is well-structured, with content logically grouped into clear categories such as “Menu,” “Locations,” “Catering,” and “Franchise.” Visual hierarchy is effectively used through layout, spacing, and typography to guide the user's eye through the page.
The language throughout the site is straightforward and conversational. Headings and subheadings are clear and action-oriented, helping visitors quickly find what they need. Text content is well-balanced with visuals, and important features—like special offers and products for sale—are easy to locate and read.
Performance
The site is fully responsive, performance is smooth with no loading delays. It adapts smoothly to tablets and smartphones without a drop in performance.
Feedback
Week 1
General feedback : -
Specific Feedback : (Choosing bad website to redesign) This James Bond 007 museum is a good choice, but you have to come up with a content structure, since it doesn't have one.
Week 2
General feedback : -
Specific Feedback : -
Reflections
Exploring these five websites has deepened my understanding of usability principles and how thoughtful design can significantly enhance user experience. Each site showcased different strengths—from creative interactivity and branding in Bruno Simon's portfolio to clean navigation and clarity in Coffee Roasting Man and Rivora Systems. I’ve learned how layout, typography, responsive design, and interactive features work together to support user goals and ease of use.
Comments
Post a Comment