Exercise 9: Examples of User Interface Design Principle

Exercise 9: Examples of User Interface Design Principle | Section 1 by AZLIN BINTI NORDIN https://padlet.com/azlinnordin/EX9_SEC1 Semester 2 2021/2022 en-us 2022-03-18 14:07:22 UTC 2023-02-03 09:57:21 UTC hello@padlet.com GROUP G : METEOR farahanim1308 https://padlet.com/azlinnordin/EX9_SEC1/wish/2131830856 GROUP MEMBERS:
1.MUHAMMAD IRFAN ZAKI BIN MOHD RAZALI (2119015)
2.SITI NURFARAHANIM BINTI MOHD ISA (2119316)
3.NURSYAHIRA BINTI SALLEH (2115912)
4.NOOR NAJIHAH BINTI NORDIN(2116116)

INTERFACE DESIGN PRINCIPLE: FOCUS

This is the user interface of the maybank2u mobile application. Focus principle can be seen when the apps prompt users to enter a password with clear instructions on what to fill in the blank and they only provide one answer field that has description. So that user can only focus on the task they are required to do without being distracted by other elements of the interface. First time users will also straight away understand what to do without feeling confused.

]]> 2022-04-06 02:29:54 UTC https://padlet.com/azlinnordin/EX9_SEC1/wish/2131830856 Group B: Django qhuratuln https://padlet.com/azlinnordin/EX9_SEC1/wish/2131883327 Group Members:

Qhuratul Nissa Binti Mior Idris | 2116092
Fariha Hadaina binti Mohd Shazali | 2114478
Maryam Umairah binti Arman Yatim | 2110256
Sofea Hani binti Ahmad Shazali | 2115668

PRINCIPLE: LEARNABILITY

This is the user interface of the Whatsapp mobile application. The learnability of the application can be seen first with all the main features being displayed on the main screen, such as the chat boxes, status, calls, and camera. When the user revisits the application, this makes it easier to navigate and minimizes learning time. The icons used throughout the application interfaces are also universal and recognizable. For example, the emoji panel, file attachment, camera, and voice messages.

]]> 2022-04-06 03:11:14 UTC https://padlet.com/azlinnordin/EX9_SEC1/wish/2131883327 Group D : Spring https://padlet.com/azlinnordin/EX9_SEC1/wish/2132849218 Group Members :

Danish Zahiruddin bin Khairul Anuar | 2012785
Nurul Alifah Maisarah binti Abdul Halim | 2114912
Nurin Afiqah binti Mohd Baharuddin | 2113272
Nursyahirah binti Syarkan | 2112510

PRINCIPLE : HUMAN INTERFACE OBJECTS

Human-interface objects are separate and distinct from the objects found in object-oriented systems. Our object for example the laptop include folders, documents, buttons, menus, and the trashcan.

In every version of Microsoft Windows since Windows 95, the Recycle Bin is an area where deleted files or folders are temporarily saved. Users can retrieve files that have been deleted in Windows by using the Recycle Bin. It's on my computer's desktop. The graphic depicts how the Recycle Bin could appear in your version of Windows.]]> 2022-04-06 15:18:49 UTC https://padlet.com/azlinnordin/EX9_SEC1/wish/2132849218 Group A : Express shahira3 https://padlet.com/azlinnordin/EX9_SEC1/wish/2135737734 Group members :

1. Hadura Fairuzza binti Abd Halim (2113584)

2. Shahir Akram bin Anuar (2113999)

3. Farahiyyah binti Munawwar Hidayat (2116780)

4. Hanis Karmila binti Suhaimi (2113412)

PRINCIPLE : VISIBLE NAVIGATION

This is the user interface of the Grab mobile application that applies tab bar navigation. Tab bar is one of the examples of visible navigation. The tab bar motif comes from desktop design. It usually has a small number of destinations that are all equally important and require direct access from anywhere in the app. Tab bars are persistent. The navigation remains visible regardless of the page the user is on. All of the key app views are clearly visible to the user, and they can be accessed with a single click. For example, the grab application in mobile phone is designed to put their main features on the bottom of the screen making it easier for users to use the application.

]]> 2022-04-08 03:34:52 UTC https://padlet.com/azlinnordin/EX9_SEC1/wish/2135737734 Group F: Vue aqilahzaidon321 https://padlet.com/azlinnordin/EX9_SEC1/wish/2137432188 Group Members :
1) Nur Fatihah binti Abdullah (2115778)
2) Nur 'Aqilah binti Zaidon (2110682)
3) Nurul Nuha binti Mohd Zaki Udin (2111738)
4) Naafilah Hudaa binti Muhammad Shakir (2111798)

Principle: Latency Reduction
Example: Instagram (Posting photos)

Instagram allows the users to upload their photos. The app makes sure that the users can upload the photos smoothly and efficiently by applying the latency reduction principle in its system. During the uploading process, there will be two parts, which is first the users need to choose the photos. This is where the latency reduction principle is applied as the users are brought up to the next process as shown in the right picture while the photos are being uploaded. With the principle that is being applied, it has increased UI responsiveness for the next process.]]> 2022-04-09 15:08:03 UTC https://padlet.com/azlinnordin/EX9_SEC1/wish/2137432188 GROUP H : Rails abdhannan1704 https://padlet.com/azlinnordin/EX9_SEC1/wish/2137722670 GROUP MEMBERS:
Ahmad Imtiyaz bin Suhaimi (2113719)
Adam Haikal bin Alias (2114265)
Amir Arif bin Rosli (2116249)
Abdul Hannan bin Zainudin (2118719)

Communication

Communication in interface design principles defines as the interface should communicate the status of any activity initiated by the user. For example, the system in the screenshot above communicate to the user by asking the username and password to access user's account. This image above show that the user had entered the password incorrectly and the system displays "Invalid credentials". The system asks the user to enter the password again to access their account. This shows the communication between the user and the system.]]> 2022-04-10 01:56:53 UTC https://padlet.com/azlinnordin/EX9_SEC1/wish/2137722670 Group E : Angular nurulfarhanahnatasya https://padlet.com/azlinnordin/EX9_SEC1/wish/2137848268 Group Members:
1. Nor Anisah binti Amir Hamzah | 2114564
2. Nurul Balqis binti Azri | 2116956
3. Nursyakirah binti Ridzuan | 2112324
4. Nurul Farhanah Natasya binti Rozelan | 2115210

PRINCIPLE: CONTROLLED AUTONOMY

The applications that we chose is Canva. The user interface design of Canva above applies the controlled autonomy principle because it makes it easier for users to browse throughout this web applications, however it is done in a way that respects the navigation rules that have been defined by the developer for the application. Instead of being pushed to do things in ways defined by others, users are permitted to make choices that match with their needs and values. For example, users can choose fonts and sizes they want but they are limited to the choices that the developer provided. Canva also provides its users with a variety of alternatives for creating creative powerpoint presentations design and etc. Users also can modify the existing template designs according to their preferences.

]]> 2022-04-10 07:54:46 UTC https://padlet.com/azlinnordin/EX9_SEC1/wish/2137848268 GROUP I - EMBER alifrazmi15 https://padlet.com/azlinnordin/EX9_SEC1/wish/2137869629 GROUP MEMBERS :
1. MUHAMMAD ALIF HAZIQ BIN
MOHD RAZMI (2110091)
2. MUHAMMAD AL-QARDHAWI BIN
AZAHAR (2114045)
3. MUHAMMAD AIMAN BIN JOHARI (2118131)
4. MUHAMMAD AKMAL BIN
RAHIMEY (2119651)

PRINCIPLE: CONSISTENCY

Consistency means we produce all the elements with similarity. They should look and work as the parts of one bigger organism. This way, we give the user a much easier and more pleasant experience with our final product. We can take Microsoft Office as an example. Microsoft Word, Microsoft Excel, and Microsoft Powerpoint have similarities on its icons, home windows, and main menus. a task can be completed in the same way across products

]]> 2022-04-10 08:47:19 UTC https://padlet.com/azlinnordin/EX9_SEC1/wish/2137869629 Group C : Laravel ainamzaki https://padlet.com/azlinnordin/EX9_SEC1/wish/2138080842 Group Members :
1.Ainul Mardhiah Binti Mohammed Rafiq (2112100)

2. Aina Zahira Binti Mohd Zaki (2115676)

3. Afiqah Binti Abdul Rashid (2116908)

4. Aida Najihah Binti Mohd Marzuki (2118230)

PRINCIPLE: READABILITY
EXAMPLE: ASTRO AWANI APPLICATIONS

Astro Awani application is a news channel that can be accessed through mobile phones. This app has a great readability to make the interaction between users and apps smooth. It is created to be easy to view and read as it involves a lot of media in texts. Therefore they use an efficient size of text so that it is readable to the young and old. It also has the right font weight like bold to emphasize the text of the headline and differentiate between the title and the content. This application has put a lot of concern in text to make sure that the user has the best experience while using their application as it is mainly used for reading. Good readability will make the user spend a lot more time on the application therefore increase their engagement time and usage.

]]> 2022-04-10 15:54:36 UTC https://padlet.com/azlinnordin/EX9_SEC1/wish/2138080842