Application Design II - Lecture & Exercise

on
25/4/2024 - 13/5/2023 (Week1 - Week4)
Teoh Gim Khoon (0361563)
Bachelor of Design (Hons) in Creative Media
Lecture & Exercise

INSTRUCTIONS

LECTURE

Week 1
Module Briefing

Week 2
HTML & CSS Recap

Week 4
GSAP Animation



Exercise

Week 1
Law of UX (Reflection)
Fitts's Law dictates that the time required to move to a target area (like a button) is a function of the distance to the target and the size of the target. 
  • Button or Tappable Element Placement: Ensure that buttons or interactive elements are placed where users expect them and are easily reachable.
  • Adequate Size for Interaction: Make sure these elements are large enough to tap or interact with comfortably, reducing the chance of misclicks. 
  • Appropriate Spacing: Provide enough space between interactive elements to prevent accidental clicks or taps, improving the accuracy of user interactions. 
  • Accessibility Considerations: Design with accessibility in mind, ensuring that users with different abilities can easily acquire and interact with elements.

Jakob's Law suggests that users prefer interfaces they are familiar with. It emphasizes the importance of leveraging existing design patterns and structures to enhance usability. 
  • Utilise Established UI/UX Patterns: Draw inspiration from well-known UI/UX patterns and conventions to create a familiar and intuitive user experience.
  • Avoid Reinventing the Wheel: Rather than introducing entirely new interaction models, stick to familiar flows and structures that users are accustomed to.
  • Streamline Navigation: Make navigation intuitive by aligning it with common design paradigms, reducing the need for users to learn new mental models.
  • Consistency Across Platforms: Maintain consistency across platforms and devices to ensure a seamless experience for users accustomed to various interfaces.
Miller's Law posits that the average person can retain around 7 (plus or minus 2) items in their working memory at once.
  • Option Presentation: When presenting options to users, consider the limitations of working memory and aim to keep the number of choices within the "magical number" range of 5 to 9.
  • Categorization and Sub-Categorization: Organize options into logical categories or sub-categories to reduce cognitive load and make information more digestible for users.
  • Prioritize Essential Information: Focus on presenting the most relevant and important options, keeping extraneous choices to a minimum to prevent overwhelming users.
  • Progressive Disclosure: Employ techniques like progressive disclosure to reveal additional options or information gradually, allowing users to focus on immediate tasks without feeling overwhelmed.
10 Usability Heuristics (Reflection)

Aesthetic and Minimalist Design
Striking a balance between aesthetic appeal and minimalist design principles is crucial for usability. Reflecting on this heuristic, I appreciate the impact of clean layouts, intuitive information architecture, and visually pleasing aesthetics in creating engaging and user-centric experiences that resonate with users on an emotional level.

Flexibility and Efficiency of Use
Offering shortcuts, accelerators, and customisation options enhances the efficiency and satisfaction of power users while accommodating novice users. This heuristic prompts me to design interfaces that cater to diverse user needs and proficiency levels, fostering a sense of mastery and efficiency in interaction.

Recognition Rather Than Recall
Designing interfaces that reduce the cognitive load on users by leveraging recognition over recall is pivotal for usability. Reflecting on this heuristic, I understand the importance of providing visible cues, labels, and contextual help to assist users in completing tasks without relying heavily on memory retrieval.


Week 2
To recap the HTML/CSS, I code the 'ibandsnet' application exercise by using Visual Studio Code to refresh my skillset of coding.


Week 3
We learn the JavaScript DOM by trying out to apply on last week 'Ibandsnet' application UI and test out the DOM function.

W3 schools (JS Html DOM Method)

Try out on VS Code

Result

Style change, Text change while tap on certain icon

Sidebar panel & Popup show up

Week 4
We learn the GSAP by trying out to apply on the 'Ibandsnet' application UI and test out the animation.

GSAP Animation

GSAP Tween:
  • gsap.to()
  • gsap.from()
  • gsap.fromTo()
Timeline

Learn about how to make animation timeline by applying delay code to make the animation show up by sequences.

Result
Here is how the animation work on the app
  • Page startup animation
  • Sidebar slide in animation
  • Popup bouncing animation


Week 5
Mr. Razif explained how to create a smooth transition animation for an object when hovered over, using CSS hover transition easing effects.


By adding transition code with duration and easing, the UI experience becomes much smoother and visually appealing.

Result



Week 6

Two html file merch into one
hide second page
logo animation with alert message
auto hide first and show second page
second page appear animation

event listener






Comments

Post a Comment