Exercise 9: Examples of User Interface Design Principle | Section 2 by AZLIN BINTI NORDIN https://padlet.com/azlinnordin/EX9_SEC2 Semester 2 2021/2022 en-us 2022-03-18 14:08:12 UTC 2025-11-02 08:08:23 UTC hello@padlet.com Human Interface Objects (Group D - Spring) https://padlet.com/azlinnordin/EX9_SEC2/wish/2137214662 Group Members:
1.Anis Safiyyah Binti Adnan(2116330)
2.Hannah Kamillia Binti Hamidi(2113570)
3.Che Wan Sarah Najwa Binti Che Wan Ahmad(2117644)
4.Amira Shazleen Binti Aminuddin(2118164)

We chose visual reality as our application example for Human Interface Objects. HIOs are all those objects that are viewable on the screen that the user can manipulate or that cause some action to occur. It can be seen, heard, felt or otherwise perceived. VR allows the users to interact and immersed in unreal environment (graphical user interface). It provides visual feedback when users are using it. The visual, such as battle games,horror and others that gives the users the real time feel of the environment in the games in 360 degrees using the VR headset. HIOs also can has changing sounds and audio based on the situation in the game, Spatial audio is a 360 degree sound that simulate the kind of unique audio that similar in the real world. The headset  allows you to have a complete autonomous movement through a space.]]> 2022-04-09 07:22:46 UTC https://padlet.com/azlinnordin/EX9_SEC2/wish/2137214662 Group G - Ember muhdarash73 https://padlet.com/azlinnordin/EX9_SEC2/wish/2137463353 Group Members:
1. Ahmad Hazim bin Mohd Zin (2118511)
2. Muhamad Arash Bin Abdullah @ Shamsudin (2118279)
3. Muhammad Nur Badri Bin Mahazir (2110797) 
4. Muhammad Mujahid Bin Mahazanan (2119989)

User interface design principle: Focus 

This is the user interface of Touch n Go Ewallet mobile application. Focus principle can be seen when the apps prompt users to enter the amount that they want to reload with clear instructions on what to fill in the blank and also provide a selection of recommendation amounts  that users can choose easily without typing the amount. Other than that, the interface also clearly states the minimum reload amount to avoid users entering the invalid amount, so that the reloading process can be faster without any failure. Hence, the user can only focus on the task they are required to do without being distracted by other elements of the interface. First time users also, will straight away understand what to do without feeling confused.
]]> 2022-04-09 16:04:08 UTC https://padlet.com/azlinnordin/EX9_SEC2/wish/2137463353 GROUP: A (Express) https://padlet.com/azlinnordin/EX9_SEC2/wish/2137774022 GROUP MEMBERS:
Hana Humayra binti Sulaiman Sateh (2125156)
Nur Fatihah Adawiyah binti Rusdi (2126644)
Mohamad Syafiq Aiman Bin Rozaiman (2110433)
Muhammad Farhan Bin Mohd Noorshahran (2113563)

GUI PRINCIPLE: VISIBLE NAVIGATION
EXAMPLE OF APPLICATION: TELEGRAM

The good User Interface principle that we have been assigned to is visible navigation. The example that we choose is Telegram because most of us have been familiar with it and use this application in daily life. This is the user interface of the Telegram desktop application. It applies sidebar navigation that is located at the left side of the application which is pretty easy to be find by user or new user. In this sidebar, there are important buttons such as Contacts, Calls, Saved Messages, Settings and so on. All of them are visible with understandable icons to the users, and they can be access with a single click. A sidebar provides app-level navigation and quick access to top-level collections of contents. Selecting an item in the sidebar allows people to navigate to a specific piece of contents. Navigation allow the user to navigate through the app. The clear navigation in Telegram makes it easier for user to go to settings, access their saved messages or change the display mode. Navigation must be readable and understandable for the user. Furthermore, Telegram allow people to hide the sidebar to create more room for their content, and to show the sidebar again using the built-in edge button. ]]> 2022-04-10 04:16:19 UTC https://padlet.com/azlinnordin/EX9_SEC2/wish/2137774022 Group B: Django https://padlet.com/azlinnordin/EX9_SEC2/wish/2137893151 members:
1.  Khairul Ikhwan (2110753)
2. Syahmi Salam (2115083)
3. Zafran Syahmi (2111851)
4. Khairul Fahmi (2115889)

GUI Principle: Learnability
Example of Application: Learning C Programming

One of the five qualitative components of usability is learnability. It is extremely useful for complicated programs and systems that users access regularly, but it is also useful to know how quickly users can adapt to the interface of objectively basic systems. When users first use the application, they will discover how much fun it is to learn C programming when they get to use the compiler in the mobile application. The navigation buttons such as home, examples, challenges, compiler, and save code are all in the same place, with constant examples by instructors and challenges, and no changes to the organization of the updated date. Users can also improve their skills with the design interface because it has been used several times and across all applications, even if they do not use it frequently. Some students' productivity can be exceptionally high when it comes to completing daily assignments or challenges assigned by the instructor.]]> 2022-04-10 09:44:32 UTC https://padlet.com/azlinnordin/EX9_SEC2/wish/2137893151 Group F - Vue nuurnadheerah02 https://padlet.com/azlinnordin/EX9_SEC2/wish/2138013164 Group members:
1. Nuur Nadheerah Binti Mohammad Lutfi (2117898)
2. Farah Izzah Wong Binti Abdul Rahman Wong (2111188)
3. Husna Ezzah Binti Mohd Fakhrurrazi (2110942)
4. Jawaher Abdulrahim (1636616)

GUI: Latency Reduction
Example of Application: Mobile Legends: Bang Bang

Gaming requires low latency or lag in your home network. Low latency is not the same as low speed. Low latency indicates there is a strong, dependable network connection, which reduces the  chance of a connection loss or delay. This is especially important in games, where a missed move might result in instant death. A wired connection is good for gaming since it drastically minimizes, if not completely eliminates, lag. Hence, this user interface instills a sense of control in its users. Keeping users in control makes them comfortable as they will follow the flow  quickly and gain a fast sense of stability in the game. 


]]> 2022-04-10 13:57:52 UTC https://padlet.com/azlinnordin/EX9_SEC2/wish/2138013164 hanifkmal02 https://padlet.com/azlinnordin/EX9_SEC2/wish/2138038566 Group Members :
1) MUHAMMAD FIKRI BIN  MOHAMMAD ISA  2110105
2) MUHAMMAD SYAZWAN BIN MAT SHUKI 2119861
3) MUHAMMAD ADIB BIN MOHD SAID 2116287
4) MUHAMMAD HANIF BIN MD KAMAL 2114963

GUI Principle : Controlled Automasy
Example of Application : FoodPanda

This is the user interface of FoodPanda delivery applications. The interface of this system facilitate user movement through out the their application, but it should do so in a manner that enforces navigation conventions that have been established for the application. For example, This application applies the controlled autonomy of user interface principle by making a multiple choice for the user to select. As we can see in the picture above, the system gave the user multiple choices of pizza to choose. So, the user gain a fast sense of mastery when they are placed “in charge.”. This system will navigate the user from the ordering process toward delivery process. They will get many choice of payment such as online banking and cash on delivery. If the developers take that kind of control away, users can be left frustrated and angry. There should be no navigation mechanism that enables a user to circumvent these controls.]]> 2022-04-10 14:39:14 UTC https://padlet.com/azlinnordin/EX9_SEC2/wish/2138038566 Group C ( Laravel ) puterifarhana0212 https://padlet.com/azlinnordin/EX9_SEC2/wish/2138075406 1. Nooralya Qasrina Binti Zuraimi 2118228 
2. Shafia Hanis Binti Shamsul Asmadi 2110578 
3. Puteri Sabrina Raysa Binti Ramlan 2111742
 4. Puteri Noor Farhana Binti Megat Mohd Suhaimi 2116304

  Readability refers to the ease with which written text is perceived by a user. For example, the user interface design on Twitter applies the readability principle as it allows their users to customise the size and colour of the texts shown on their own screen without affecting other users. This gives an opportunity for each user with different eyesights to adjust the text to their personal needs. The default of Twitter’s background colour is white, contrast to the black text. Contrast impacts on the ability to differentiate and read text components thoroughly. Too little contrast causes text- or tweets to clump together and become unreadable, while too much contrast causes eye strain and makes reading physically difficult. Twitter offers a change in background colour but is limited to Dim, which renders your screen grey and Lights off, which fully blackens your background. Font styles are also important because a dark background absorbs some light from other pieces, there should be adequate free space between texts. Furthermore, clickable text (links to other sites) must be visually identified. In this app, the links or tags(#) are put in a different colour to attract attention to a specific information included.


]]> 2022-04-10 15:44:42 UTC https://padlet.com/azlinnordin/EX9_SEC2/wish/2138075406 Group H (YouTube) https://padlet.com/azlinnordin/EX9_SEC2/wish/2138151625 Hussein Ahmed Gaafar Albaiti 2110925
Muhammad Afiq Bin Mohd Ara 1910829
Muhammad 'Affif Bin Rusli 1923949
Muhammad Hanif B Ismail 2110619

Readability—All information presented through the interface should be readable by young and old. 
 YouTube is technically only for teens 13 and up, and what the site considers age-appropriate may not match your values. But YouTube offers a filter called Restricted Mode that limits the iffy stuff


]]> 2022-04-10 17:56:21 UTC https://padlet.com/azlinnordin/EX9_SEC2/wish/2138151625 GROUP I https://padlet.com/azlinnordin/EX9_SEC2/wish/2138625639 GUI Principle: Consistency
Group Members:
1. Ameer Al-Wafiq Bin Norazam 2119005
2. Muhamad Zikry Adib Bin Mohd Suhaimi 2112197

The main point for consistency is to reduce time taken for user to learn new features and to eliminate any confusion to the user at every touch point available in the interface. So, by having a user interface that is consistent will make it easier for user to engage with minimal problems. For example, Google have been consistent with their theme as well as their arrangement and design of their interface across all their sub-platforms like Google Drive, Google Meet and Gmail. The familiarity across all other sub-platforms can be seen especially when it is the first time the user come across a Google service, Google tend to have a unified theme on how to welcome new users to their services. That will help eliminate the confusion across Google services on how to use them and reduce time taken to familiarize with new interfaces.

]]> 2022-04-11 04:23:07 UTC https://padlet.com/azlinnordin/EX9_SEC2/wish/2138625639