UNIVERSITI TEKNOLOGI MALAYSIAFACULTY OF COMPUTINGSESSION 2019/2020 SEMESTER 1

Code & Subject : SCSV 2113 – Human Computer InteractionName of Lecturer : Nor Anita Fairos Binti IsmailSubmission Date : 09 October 2019

INDIVIDUAL ASSIGNMENT [25 marks]

UI CRITIQUEGood and Bad User Interface Design

The objective of this assignment is to critique the design of a user interfaces.

Find any TWO examples of DESIGN interfaces. Your examples should be specific and different with others. It is very hard to find a large interface that is completely good or completely bad, so don't try. Instead, focus on a particular feature or aspect of the interface that makes your case. Find concrete reasons for your judgment. Instead of providing reasonings based on the general design principles, in this assignment, you must refer to Shneiderman’s 8 Golden Rules: https://www.cs.umd.edu/users/ben/goldenrules.html

You are not limited to desktop software. Web sites offer many great candidates for fame and shame. You aren't even limited to traditional computer interfaces. Feel free to go out into the real world, and consider consumer appliances, car dashboards, building entrances, traffic intersections, shower controls, mobile phone etc. (Norman's book Design of Everyday Things includes a lot of examples of this kind, which you may find inspirational.)

What to submit: Your report should include TWO examples of Human Interaction Design Interface. One of the examples is encouraged to be any UTM systems / applications / portal.

describe the purpose of the overall interface [2 m] x 2 appropriate pictures/images of the interface [2 m] x 2 describe the particular aspect you find good and bad [3 m] x 2 explain why it's good or bad based on the 8 Golden Rules [5 m] x 2 Formatting 1m

Compile all your works in report Microsoft Word documentation. Submit on 28 September 2019 tthrough the UTM e-learning and select “Submission – T1 Individual Assignment”. Please use the template assignment cover.

UNIVERSITI TEKNOLOGI MALAYSIASCHOOL OF COMPUTING

SESSION 2019/2020 SEMESTER 1

SUBJECTSCSV 2113 – Human Computer Interaction

LECTURE’S NAMENor Anita Fairos Binti Ismail

T1-INDIVIDUAL ASSIGNMENT

TITLEGood and Bad User Interface Design

STUDENT’S NAMEMUHAMMAD SYUKRAN SYAHIRAN BIN

MOHD SHAIFULLIZAN

MATRIC NOA18CS0162

SECTION06

1) Emergency Phone Call

Provider The phone company itself

Language English and 45 more

Category Communication

Compatibility Work on every single phone

This interface to help user to quickly dialing a known emergency number like 112 forces the phone to try the call with any available network. On some networks, a Global System Mobile Communication (GSM) phone without a SIM card may be used to make emergency calls, and most GSM phones accept a larger list of emergency numbers without SIM card, such as 112, 911, 118, 119, 000, 110, 08, and 999.

1.1) The purpose of the overall interface. Basically this interface help users to contact with any emergency service immediately. If the users set a lock screen on the phone, the PIN entry screen will then feature an “Emergency Call” or “Emergency” button toward the bottom of the screen just like figure 1.3 for iphone users and figure 1.5 for android users. The button will enable anybody who grabs the phone to at least be able to dial 911 or 999 in case of an emergency without needing to enter a PIN or lock pattern.On most devices, the “Emergency call” button only brings up the dial pad and doesn’t automatically dial 911 when you press it. You have to press “Emergency call“, then press 9-1-1 for it to do anything.

Figure 1.5Figure 1.3

Figure 1.2 Figure 1.4

Figure 1.6 Figure 1.7 Figure 1.8

1.2) The particular aspect you find good and bad. (based on 8 Golden Rule)

One of the good aspect on this interface is the bright colour on the “Emergency call” words that connect the users to the dialing interface. Its very helpful to users especially when the users going through an emergency situation, plus they have to make immediate call to emergency service such as police, fire station or hospital without have to input the PIN number. As we all know, colour is highly contextual, and generally people like bright colour in certain situation. Based on the 8 Golden Rule of Interface Design, this interface have strive for consistency by utilizing icons, colour, menu hierarchy and call-to-action, its help the users become familiar with the emergency icon, so they can easily understand how they can to go dialing interface. The emergency button also fulfill the 8 golden rule which is give a users shortcut to a dialing interface. Other than that, emergency call interface also come with a lot of different language that can be understand by all the users. For example in figure 1.6, figure 1.7 and figure 1.8. For an iphone users, the language keep changing from one to another foreign language. But for the android users, the “emergency” word are depending on the Interface Description Language or Interface Definition Language (IDL), which is a specification language used to describe a software component’s application programming interface (API). With this aspect, it will offer support internal locus of control. Based on the 8 golden rule, this interface will give users the sense that they are in full control of events occurring in the digital space. So this emergency interface provide a good communication with the users and give a full understanding to handling the interface.

Meanwhile, this interface also have bad aspect which is not offer simple error handling. In this emergency dialing interface, no contact given including emergency service number. This lack can cause a lot of error to users especially when they try to enter an emergency number. This interface actually need a few button that include each of emergency service number so they can only choose to contact which service needed. This interface also do not give a good instruction to the users, so the problem will take a time to be solve by push a lot of button to make a single call to emergency service. Other than that, emergency call interface should have four button that contain main emergency service which is police station, fire station, hospital and other service. It is more suitable than have 10 digit number on the interface. It shows that this interface Is lack in reduce short-term memory load based on 8 Golden Rule. The interface don’t have a simple as possible with proper information hierarchy, and choosing recognition over recall. This can affected to the users which is they cannot completely use the interface in making achieve their goal or objective.

2) Golden Screen Cinema (GSC) App

Provider Golden Screen Cinema Sdn Bhd

Size 21.1 MB

Language English

Category Entertainment

Compatibility Work on iOS, Android and Windows

This app is bring to users GSC movie listings with real-time show times and the option for user to select their seats and purchase movie tickets via users smartphone.This apps also connect various cinema across the Malaysia with just click the button.

It provides me with timely and relevant tips to help improve my booking ticket also, my transaction is 100% secure via credit/debit cards.

2.1) The purpose of the overall interface.

This app provides a medium for user to booking cinema ticket. What you can find in this app is all of icon and interface is related with movie list, ticket and transaction and it easily to understand if user never use GSC app before. Once the user run this app GSC app, it greets user with the usual GSC logo (Figure 2.0). User should then be prompted to login with user GSC account details as Figure 2.1. User may also register for a new account if user do not already have one. Alternatively, user can choose to skip this step by clicking the SKIP button at the bottom of the page. Then user will direct to the “Promotions” page navigation (Figure 2.2). This is the default landing page for GSC mobile app where user can view latest GSC or movie promotions. User can click on the top right corner to open the navigation tab (Figure 2.3). From here, user can select preferred tabs such as cinemas, movies, FastTicket, History and About Us.

Figure 2.0

Figure 2.1 Figure 2.2 Figure 2.3

To start movie selection, user have to select either “Cinema” tab, “Movie” tab or the “FastTicket” tab. If the user click on the fastTicket tab, it will direct to FastTicket interface as Figure 2.4. Here user can select the cinema where user would like to watch their movie. Next, user should pick the preferred screening date, time and movie followed by the type of tickets. User also been given choice for e-combo before they choose the payment method and press continue to next step or seat selection screen. But if users click on the “Cinema” or “Movie” button, user will direct to preferred cinema (Figure 2.5) or preferred movie(Figure 2.6). The next step should be same like the fastTicket interface for select the date, time and their type of ticket followed by the payment method before go to the seat selection interface.

Figure 2.4 Figure 2.5 Figure 2.6

After user done choosing all the information to their movie, user will give choice to pick their preferred seats from the screen on the seat selection screen interface (Figure 2.7). After that, user should press next to continue. User selected seats will now be “reserved” like in Figure 2.8 while the user complete the transaction in the event that the transaction is not completed within 8 minutes, the seats will be released. User will have through the mobile purchase process again. After done with all the transaction process, there will be message informing you on the successful transaction within the

Figure 2.7 Figure 2.8 Figure 2.9

app. The 2D barcode ticket will be displayed on the user mobile screen like Figure 2.9.

So, with the barcode, user can come to the cinema without making any payment on the counter. User can only scan the barcode and enjoy the movie.

2.2) The particular aspect you find good and bad.What I find it is a good apps are the icons are easily to understand also it follow

the phases to booking cinema ticket by per page start from “Cinema” or “Movie” or “FastTicket” page with the date and time then “Choose available seat” and it end with payment page (Shneiderman’s 8 Golden Rules: Offer Informative Feedback).This app also an interactive interface because users can go back to previous phase if they do some wrong step or input by hit the back button at the top (Shneiderman’s 8 Golden Rules: Permit Easy Reversal of Action). Plus, it uses same font every page which is easily to read (Shneiderman’s 8 Golden Rules: Strive to Consistency). Not only that, the colour of the interface like font and the background also give user more understanding and make all the word easy to read. In the page to choose the seat also looks very neat and enlarges with label by three different color so, we can find the available seats and best position for user to choose with a help of symbol like the screen at the top. They won't be struggling to navigate across the app and booking the ticket is extremely simple.

Meanwhile, what is bad about this app is when user already tap on available seat, suddenly he needs to go to previous page or minimize the app then go to page to choose the seat, the previous seat was not available so, he needs to choose another seat. This app also lack in clock hour system. This interface is using 12-hours clock system, which a lot of users can missed read a correct timing to their cinema. They should use 24-hours system to reduce an error for user to booking the cinema ticket. Next, user not allowed to redeem back their money once they have confirmed book their ticket and received the barcode in this apps. This should be considered by the provider in case some of the user should let go their ticket for an emergency case.